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
相关推荐
LPieces3 分钟前
从零实现 AI 流式对话:SSE + Node.js 完整指南
前端
Crystal3286 分钟前
【终极指南】前端方面解决 uni-app APP 端 SSE 流式请求被缓冲拦截、无法实时渲染的问题
android·前端·ai编程
BG7 分钟前
利用Codex GPT-5.5 基于extended_image新增图片透视变换功能
前端·flutter
daols889 分钟前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
javascript·vue.js·甘特图
小四的小六12 分钟前
WebView 内存治理与稳定性实战:那些线上OOM教会我的事
前端·webview
我命由我1234528 分钟前
前端开发概念 - 无障碍树
javascript·css·笔记·学习·html·html5·js
admiraldeworm36 分钟前
c -> true 导致异常返回 404 问题排查
c语言·开发语言
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_29:(动态构建与更新 DOM 树)
前端·javascript·ui·html·html5·媒体
qq_375916371 小时前
kettle菜鸟教程
开发语言·kettle
编程技术手记1 小时前
html table布局平衡
前端·html