Axios 取消请求

如果是react项目,推荐ahooks

如果是vue项目,推荐ahooks-vue

但如果用的是纯axios, 想要取消请求的话,可以这样

axios文档

javascript 复制代码
request.js

// 存放请求的key和取消请求的方法
const reqMap = new Map()

// 创建实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 根据路劲和请求方式生成请求的key
const getReqKey = (config) => {
    let { url, method } = config;

    return [url, method].join("&");
}

// 删除方法
const delRepeatReq = (config) => {
  const reqKey= getReqKey(config);

  // 如果存在第一次请求的key
  if (reqMap.has(reqKey)) {
    const cancelToken = reqMap.get(reqKey);  
    cancelToken(reqKey);
    reqMap.delete(reqKey);
  }
}

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 执行删除重复请求
    delRepeatReq(config)
    
    // 得到key
    const reqKey= getReqKey(config);

    // 将key和cancel 存放到map
    config.cancelToken = new Axios.CancelToken((cancel) => {
      if (!reqMap.has(reqKey)) {
        // 第一次请求存放key
        reqMap.set(reqKey, cancel);
      }
    });

    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
相关推荐
学习OK呀6 分钟前
后端上手学习react基础知识
前端
星火飞码iFlyCode7 分钟前
大模型提效之服务端日常开发
前端
zoahxmy09298 分钟前
Canvas 实现单指拖动、双指拖动和双指缩放
前端·javascript
花花鱼8 分钟前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
Riesenzahn10 分钟前
CSS的伪类和伪对象有什么不同?
前端·javascript
Riesenzahn10 分钟前
请描述下null和undefined的区别是什么?这两者分别运用在什么场景?
前端·javascript
代码小学僧10 分钟前
一行代码顶二十行代码! 🔧 修复 React 聊天室滚动加载问题 Bugfix 解决方法分享
前端·css·react.js
__不想说话__11 分钟前
前端视角下的AI应用:技术融合与工程实践指南
前端·javascript·aigc
niusir11 分钟前
使用 useCallback 和 useMemo 进行 React 性能优化
前端·javascript·react.js
niusir13 分钟前
深入理解 React 自定义 Hook
前端·react.js·前端框架