vue 请求接口快慢 覆盖 解决方案

vue 请求接口快的被慢的覆盖的问题,有一个接口比较慢,当created去调用函数请求的时候,数据还没回来,就去筛选数据,筛选数据的调用比较快,很快就回来了,但当慢的相应回来之后,导致快的结果覆盖了慢的结果,如何解决呢?

注意:还有一个前提是:同一个接口,但是参数不同。


解决方案:

先不用AbortController去取消,我知道可能你想到的是这个。

而且一般项目当中都是封装在同一个请求文件,这个时候就需要考虑不同请求地址不同参数等等不同的前提条件。

所以首先考虑看看能不能用标识这种写法先去写,(如果需求催得急的情况):

js 复制代码
let currentRequestId = 0

async function fetchData(params) {
  const requestId = ++currentRequstId;
  
  try {
    const response = await api.get('/data', { params });
    
    // 检查是不是最新的请求,不是的话,不走下去了
    if (requestId !== currentRequestId) {
      return
    }
    
    return response.data;
    
  } catch (error) {
    if (requestId !== currentRequestId) {
      console.log('已忽略过时的错误')
      return
    }
    throw error
  }
}
相关推荐
AI视觉网奇2 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1232 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh4 小时前
less和sass
前端·less·sass
Nan_Shu_6146 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel7 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始7 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible7 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫8 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评8 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner8 小时前
【html】canvas实现一个时钟
前端·html