文章目录
此处一堆废话:目录锚点查看解决方法
今天发现一个历史功能查询的数据突然出现了错误
(因为请求接口代码后续操作是同步,加载了多条数据)。
排查问题原因是因为这个接口突然变的很慢,导致多次的情况下接口未及时返回
因:切换此功能中在切换筛选条件时也要触发查询,所以未加loading判定。
此方法更适合只有少数接口需要做优化的情况。更复杂情况建议使用:请求封装 + AbortController (fetch) 或 CancelToken (axios) 的方案。
解决方法
每次调用接口以时间戳作为id,请求结束后判断id是否一致
search() {
const nowtime = new Date().getTime()
// 示例代码是在 vue 中使用。
// 其他开发环境注意此处 requestId 存放位置。
this.requestId = nowTime
getData()
.then(res => {
if (id !== this.requestId) return
// TODO...
})
}
闭包版 如果你使用上面代码不起作用可以更换此版本。
// 查询方法
search() {
const nowtime = new Date().getTime()
this.requestId = nowTime
const fn = (id) => {
getData()
.then(res => {
if (id !== this.requestId) return
})
}
fn(nowTime)
}
5629

被折叠的 条评论
为什么被折叠?



