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
  }
}
相关推荐
Baklib梅梅38 分钟前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_44 分钟前
Chrome开发者工具
前端·chrome
YiHanXii1 小时前
this 输出题
前端·javascript·1024程序员节
楊无好1 小时前
React中ref
前端·react.js
程琬清君1 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 小时前
flutter实现web端实现效果
前端·flutter
csj502 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19893 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
言德斐3 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django