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
相关推荐
新中地GIS开发老师5 分钟前
WebGIS开发入门 | 从 Web 开发到地图开发,差别在哪儿?
前端·vue·webgis
IMPYLH12 分钟前
HTML 的 <p> 元素
前端·javascript·html
leoZ23114 分钟前
第 4 篇:布局骨架——页面壳、栅格、卡片
前端·javascript·vue.js·opencv·计算机视觉·数据挖掘·语音识别
何以解忧,唯有..23 分钟前
Vue 3 模板语法详解:从插值到指令的完整指南
前端·javascript·vue.js
传奇开心果编程24 分钟前
【Rust入门知识点学与练】第5课:函数
开发语言·学习·rust
秋田君28 分钟前
Qt_QMediaPlayer类与QMediaPlaylist类
开发语言·qt
统计学小王子34 分钟前
数学建模国赛倒计时6天——《软件工具(R语言精讲)》
开发语言·数学建模·r语言
C++ 老炮儿的技术栈37 分钟前
Qt5 使用 QPainter 绘制阿基米德螺线
开发语言·c++·windows·qt·代码化
invicinble41 分钟前
【无标题】
前端