亲宝软件园·资讯

展开

history保存列表页ajax请求的状态使用示例详解

鱼露 人气:0

问题

最近碰到两个问题:

优化前代码

代码如下,在页数变化的时候,去异步请求数据,渲染页面。

const currentChange = (currentPage) => {
    ajax(`请求地址/${currentPage}`)
    .then(renderPage)
}

history

经过几番搜索,发现可以用History 接口来实现我们想要功能。

history.pushState()

按指定的名称和URL(如果提供该参数)将数据push进会话历史栈,数据被DOM进行不透明处理;你可以指定任何可以被序列化的javascript对象。具体描述可以参考文档

通过history.pushState(state, title, url)可以修改会话历史栈,把我们需要保存的数据存到state中,这里我们存入一个对象,属性为当前页数;title一般没什么用,这里传入null;url会修改当前历史纪录的地址,浏览器在调用pushState()方法后不会去加载这个URL

假设当前currentPage为1,当前url为www.example.com/search/index

...
const pushState = () => {
    const url = `/search/index/${currentPage}`
    history.push({
        page: currentPage
    }, null, url)
}
const currentChange = (currentPage) => {
    ajax(`请求地址/${currentPage}`)
    .then(res =>{
        pushState(currentPage)
        renderPage()
    })
}
...

现在代码执行顺序是:页数改变 => ajax请求 => pushState => renderPage()

在pushState之后当前url变成www.example.com/search/index/1

window.onpopstate

现在我们通过history.pushState()方法把状态存入历史会话中了,接下来就要监听window.onpopstate事件

参考mdn文档window.onpopstate

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

接下来监听这个事件

window.addEventListener("popstate", (event) => {
	if(event.state !== null){
	    page = event.state.page
	    changeCurrentPage(page) // 修改当前页数
	}
})

当popstate触发时,会修改当前页数,然后触发之前定义的currentChange方法,更新数据,渲染页面。

问题2

到此为止,问题1就解决了。

接下来要解决问题二:从详情页返回列表页,记住之前的状态
这里我用url来记录状态,之前pushState推入的url就派上用场了。 只要把进入页面首次请求的地址改成当前url就可以了

假设之前push的url为www.example.com/search/index/5,从详情页返回之后url还会显示www.example.com/search/index/5

mounted () {
    ajax(location.href)
}

这样就完成了。 当然如果你的状态比较复杂,可以把数据存入本地Storage,添加一些判断即可

加载全部内容

相关教程
猜你喜欢
用户评论