elementUI 因为异步查询时间不同 导致table赋值发生错乱

先说产生原因, 上图:

这是一个列表列表的请求, 带条件查询返回结果比较快, 会被查询所有慢请求的结果覆盖掉.

这里我们使用axios的方法:

// cancel是一个变量 用来保存关闭的回调方法
if (cancel) cancel()
  await getTaskList(params, new CancelToken(function executor(c) {
  // An executor function receives a cancel function as a parameter
  cancel = c
})).then(res => {
  this.pageTableData = res.list
  this.total = res.totalNum
  this.tableLoading = false
}).catch(err => {
  if (!axios.isCancel(err)) {
    this.pageTableData = []
    this.tableLoading = false
  }
})
复制代码

api层

// request 是对axios的封装
export function getTaskList(query, CancelToken) {
  return request({
    url: '/task/list',
    method: 'get',
    params: query,
    cancelToken: CancelToken
  })
}
复制代码

如果拦截器中设置公共错误处理方法 需要在拦截器里也配置一下isCancel

参考资料:

axios-js.com/zh-cn/docs/…
segmentfault.com/a/119000002…