Axios 请求响应拦截器 每次只发送一次请求封装

javascript 复制代码
import axios from "axios";
import general from "@/utils/general";

const request =axios.create({
    baseURL:general.serverUrl
})


const requestMap =new Map() //保存每一次请求

request.interceptors.request.use(req=>{
        let oldRequest =requestMap.get(req.url) //当前请求
        if(oldRequest)//是否未响应
        { //取消上一次请求
            oldRequest.abort() //取消上次请求
            requestMap.delete(req.url) //删除对象
        }
        const coll = new AbortController()
        req.signal=coll.signal
        requestMap.set(req.url,coll)//不存在添加当前请求
    return req
},)

request.interceptors.response.use(res => {
    requestMap.delete(res.config.url)
        return res.data
    }, error => {

    if(error.code=="ERR_CANCELED")//取消后的报错自行处理
    {
        console.warn('重复的请求')
    }else{
        return Promise.reject(error)
    }

    }
)

export  default request
相关推荐
cidy_989 小时前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端
vivo互联网技术9 小时前
动效开发不踩坑:几种动效实现方案对比与实战选型
前端·性能优化·动效
Csvn9 小时前
【Vue3】Composition API vs Options API —— 什么场景该选哪个
前端
Csvn9 小时前
Vue3 迁移血泪史:v-model 的 .sync 陷阱,90% 升级项目都会踩
前端·vue.js
光影少年9 小时前
js单线程,为什在node环境下的js可以处理高并发请求?
前端·javascript·掘金·金石计划
伊灵eLing9 小时前
GoLang 语言基础
开发语言·后端·golang
两年半的个人练习生^_^9 小时前
JMM 进阶:彻底理解 synchronized 实现原理
java·开发语言
小白不白1119 小时前
Invoke的用法
开发语言·人工智能·数码相机·计算机视觉·c#
techdashen9 小时前
What is maintenance, anyway?
开发语言·后端·rust
万法若空9 小时前
C/C++基本类型表示范围
c语言·开发语言·c++