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
相关推荐
Charlotte_jc7 分钟前
完美解决openpyxl保存Excel丢失图像/形状资源的技术方案
开发语言·python·excel·openpyxl
FogLetter9 分钟前
深入理解Flex布局:grow、shrink和basis的计算艺术
前端·css
remember_me10 分钟前
前端打印实现-全网最简单实现方法
前端·javascript·react.js
前端小巷子13 分钟前
IndexedDB:浏览器端的强大数据库
前端·javascript·面试
Whbbit199913 分钟前
如何使用 Vue Router 的类型化路由
前端·vue.js
JYeontu18 分钟前
浏览器书签还能一键下载B站视频封面?
前端·javascript
陈随易18 分钟前
Bun v1.2.16发布,内存优化,兼容提升,体验增强
前端·后端·程序员
聪明的水跃鱼19 分钟前
Nextjs15 基础配置使用
前端·next.js
happyCoder20 分钟前
如何判断用户设备-window.screen.width方式
前端
Xy91022 分钟前
从代码角度拆解Apptrace的一键拉起
javascript·数据库