axios 取消请求 版本是1.7.5

从 v0.22.0 开始,Axios 支持 AbortController 以 fetch API 的方式取消请求

bash 复制代码
官方例子
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()
bash 复制代码
request.js

import axios from 'axios'
import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'

const errorCode = {
  '401': '认证失败,无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误,请反馈给管理员'
}

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // 超时
  timeout: 10000
})
// 声明缓存请求的集合
 const pendingRequest = new Map();
//  基于请求的url和method 生成请求key
 const generateRequestKey = (config) => {
  const { method,url } = config;
  return [ method,url ].join('&')
 }
 // 缓存正在penging的请求
 const addPendingRequest = (config)=>{
  const requestKey = generateRequestKey(config);
  if(pendingRequest.has(requestKey)){
     const controller = pendingRequest.get(requestKey);
     controller.abort()
     pendingRequest.delete(requestKey);
  }
  const controller = new AbortController();
  config.signal = controller.signal;
  pendingRequest.set(requestKey,controller)
 }
 // 删除请求集合
 const removePendingRequest = (config)=>{
  const requestKey = generateRequestKey(config);
  if(pendingRequest.has(requestKey)){
     pendingRequest.delete(requestKey);
  }
 }
// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  addPendingRequest(config)
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  removePendingRequest(res.config)
  // 未设置状态码则默认成功状态
  const code = res.data.code || 200;
  // 获取错误信息
  const msg = errorCode[code] || res.data.message || errorCode['default']
  if (code == 401) {
    return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
  } else if (code == 500) {
    ElMessage({ message: msg, type: 'error' })
    return Promise.reject(new Error(msg))
  } else if (code == 601) {
    ElMessage({ message: msg, type: 'warning' })
    return Promise.reject(new Error(msg))
  } else if (code != 200) {
    ElNotification.error({ title: msg })
    return Promise.reject('error')
  } else {
    return Promise.resolve(res.data)
  }
},
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  }
)

export default service
bash 复制代码
调用

<script setup>
import { getList } from '@/api/requestApi'

const getListFn = () => {
  getList().then(res => {
    console.log(res)
  })
}
</script>

<template>
   <div class="index">
    index
    <button @click="getListFn">getList</button>
   </div>
</template>

<style lang="scss" scoped>

</style>

效果


只有最后一个 能正常请求

相关推荐
Mintopia6 分钟前
🤖 微服务架构下 WebAI 服务的高可用技术设计
前端·javascript·aigc
江城开朗的豌豆21 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅1 小时前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多1 小时前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep2 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅2 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip10 小时前
企业级配置式表单组件封装
前端·javascript·vue.js