vue中配置化取消axios的重复接口请求

桃桃小鱿鱼

已于 2022-06-16 15:33:55 修改

阅读量724

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

于 2022-06-16 14:17:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61251479/article/details/125314556

这篇博客介绍了如何在Vue项目中使用Axios配置请求拦截器来取消重复请求。通过在请求头添加`isCancel`标志，当有重复请求时，拦截器会检查并取消先前的相同接口请求，确保只保留最后一个请求。同时提供了一个封装的axios请求方法供其他组件调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 配置axios请求拦截器的地方按需要添加这一段

由于我请求的接口是相同的，是通过params传参中的GUID的标号来区别接口的不同，所以可以按照自己的需求改成通过请求接口或者别的什么来判断请求的是否是相同的接口，从而取消之前请求的接口，只保留最后一次发送的

import axios from 'axios'

let reqList = []
const stopRepeatRequest = function (guid) {
  // console.warn(reqList,)
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i].u === guid) {
      reqList[i].f()
      // console.warn(reqList[i],"取消接口")
    }
  }
}

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: 'http://11.22.33.44:0000',
  // 超时毫秒数，0为无线
  timeout: 0
})
// request拦截器
service.interceptors.request.use(config => {

//==>请求头携带isCancel为true 才会取消重复的guid接口
if(config.headers['isCancel']=='true'){
  // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
  stopRepeatRequest(config.data.GUID)
  // 设置cancelToken对象
  config.cancelToken = new axios.CancelToken(function(c) {
    // cancel = c
    reqList.push({u:config.data.GUID,f:c})
  })
}

  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
})

export default service

2.再包装一个请求接口的方法

import request from '@/utils/request'

export function axiosReq(_url,_method,_baseURL,_data,_query,_headers){
    if(_headers){
      return request({
          url: _url,method: _method,baseURL: _baseURL,data: _data,params: _query
          ,headers: _headers,
      });
    }
    else{
      return request({
          url: _url,method: _method,baseURL: _baseURL,data: _data,params: _query
      });
    }
}

3.最后在vue文件中引用方法

凡是在headers里面带了isCancel：true的，发送重复请求时都会取消之前发送的接口，以免前一个接口响应快，后一个慢，表格却渲染了前一个接口的结果

axiosReq('/Api/Handle','post',severUrl,paramsObj,queryObj,{'isCancel':'true'}).then(res=>{

}).catch(res=>{

});