表格异步加载数据显示错乱问题

问题描述

在点击tab1后在没有拿到结构的时候再次点击tab,发现tab1的数据展示在了tab2的表格中.

// 代码逻辑
getTableDataApi(type).then(res => {
  tableData.value = res.data 
})

这里的type是tab1和tab2对应的不同类型,拿到结果后复制给tableData

解决方法

代码

function createCancelApi(asyncTask) {
  let cancel = () => {}
  return (...args) => {
    return new Promise((resolve, reject) => {
      cancel()
      cancel = () => {
        resolve = reject = () => {}
      }
      asyncTask(...args).then(
        (res) => resolve(res),
        (err) => reject(err)
      )
    })
  }
}

// 修改请求的逻辑代码
const searchWithCancellation = createCancelApi(getTableDataApi)

const tab1Data = searchWithCancellation('tab1'); 
const tab2Data = searchWithCancellation('tab2');

• createCancelApi 函数接收一个异步任务函数(asyncTask)作为参数，并返回一个新的增强版异步函数。
  • 可以取消之前未完成的调用
  • 每次调用时会自动取消之前的调用
  • 返回一个Promise对象
• 关于取消机制:
  • let cancel = () => {} 初始化一个取消函数
  • 每次调用时，先执行上一次的取消函数 cancel()
  • 然后重新定义取消函数，将 resolve 和 reject 重置为空函数(() => {})，使得之前的Promise不会再被解决或拒绝

总结

如果前面请求没有拿到结果，再次请求就会执行cancel，从而将resolve和reject都设置为空函数，这样前面的Promise就不会拿到结果，也就等于执行了取消请求。