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
相关推荐
uhakadotcom9 分钟前
Python Protobuf 全面教程:常用 API 串联与实战指南
前端·面试·github
by__csdn14 分钟前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
武汉唯众智创19 分钟前
职业院校C语言程序设计(AIGC版)课程教学解决方案
c语言·开发语言·aigc·程序设计·c语言程序设计·c语言程序设计实训室
漫长的~以后27 分钟前
Edge TPU LiteRT V2拆解:1GB内存设备也能流畅跑AI的底层逻辑
前端·人工智能·edge
qq_4017004130 分钟前
C语言void*
c语言·开发语言
sg_knight31 分钟前
Python 面向对象基础复习
开发语言·python·ai编程·面向对象·模型
小福气_32 分钟前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
程序员博博33 分钟前
这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务
javascript·人工智能·后端
piaoroumi35 分钟前
UVC调试
linux·运维·前端
前端不太难1 小时前
RN 调试效率低,一点小改动就需要重新构建?解决手册(实战 / 脚本 / Demo)
前端·react native·重构