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
相关推荐
申朝先生1 小时前
用CSS画一条0.5px的线
前端·javascript·css
愚戏师1 小时前
Python :数据模型
开发语言·python
慕瑶琴1 小时前
SQL语言的编译原理
开发语言·后端·golang
雪碧聊技术2 小时前
element-plus中Autocomplete自动补全输入框组件的使用
前端·javascript·vue.js·自动补全输入框·autocomplete
浪遏2 小时前
当你向面试官朗诵单例模式时 ,ta说talk is cheep , show me the code🤡
前端·设计模式·面试
zczlsy113 小时前
webpack介绍
前端·webpack·node.js
六个点3 小时前
关于vue的面试考点总结🤯
前端·vue.js·面试
浪遏3 小时前
今晚揭开单例模式的面纱~
前端·设计模式·面试
驯龙高手_追风4 小时前
谷歌Chrome或微软Edge浏览器修改网页任意内容
前端·chrome·edge
luckyext4 小时前
Postman发送GET请求示例及注意事项
前端·后端·物联网·测试工具·小程序·c#·postman