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
相关推荐
五仁火烧2 分钟前
前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析
前端·javascript·vue.js·json
Bigger3 分钟前
第七章:我是如何剖析 Claude Code 的性能优化与部署策略的
前端·claude·源码阅读
书到用时方恨少!3 分钟前
Python 面向对象编程:从“过程清单”到“智能积木”的思维革命
开发语言·python·面向对象
大连好光景4 分钟前
接口测试入门案例
前端·后端·web
冰暮流星6 分钟前
javascript案例-简易计算器
开发语言·javascript·ecmascript
卢傢蕊7 分钟前
使用Haproxy搭建Web群集
前端·haproxy
Rsun045518 分钟前
5、Java 原型模式从入门到实战
java·开发语言·原型模式
天若有情6739 分钟前
原创C++设计模式:功能归一化——无继承、轻量版AOP,比传统OOP更优雅
开发语言·c++·设计模式·oop
FrontAI9 分钟前
Next.js从入门到实战保姆级教程:实战项目(上)——全栈博客系统架构与核心功能
开发语言·前端·javascript·react.js·系统架构
Sheldon一蓑烟雨任平生10 分钟前
边框按钮(纯CSS)
前端·css·动态按钮·css变量·边框按钮·按钮动画