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
相关推荐
小小愿望40 分钟前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望40 分钟前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴1 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
DjangoJason1 小时前
C++ 仿RabbitMQ实现消息队列项目
开发语言·c++·rabbitmq
海上彼尚2 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
m0_480502642 小时前
Rust 入门 KV存储HashMap (十七)
java·开发语言·rust
大阳1232 小时前
线程(基本概念和相关命令)
开发语言·数据结构·经验分享·算法·线程·学习经验
YA3332 小时前
java基础(九)sql基础及索引
java·开发语言·sql
开发者小天2 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
如白驹过隙3 小时前
cloudflare缓存配置
前端·缓存