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
相关推荐
带土116 小时前
2. C++ private、protected、public
开发语言·c++
我不是8神17 小时前
字节跳动 Eino 框架(Golang+AI)知识点全面总结
开发语言·人工智能·golang
古城小栈17 小时前
Rust复合类型 四大军阀:数、元、切、串
开发语言·后端·rust
Filotimo_17 小时前
那在HTML中,action是什么
前端·okhttp·html
跟着珅聪学java17 小时前
JavaScript中编写new Vue()实例的完整教程(Vue 2.x)
前端·javascript·vue.js
kong790692817 小时前
Python核心语法-Python自定义模块、Python包
开发语言·python·python核心语法
Pu_Nine_917 小时前
Vue Router 企业级配置全攻略:打造专业级路由系统
前端·vue.js·typescript·vue-router·路由配置
Marshmallowc17 小时前
React 合成事件失效?深度解析 stopPropagation 阻止冒泡无效的原因与 React 17+ 事件委派机制
前端·javascript·react.js·面试·合成事件
遗憾随她而去.17 小时前
前端浏览器缓存深度解析:从原理到实战
前端
爱敲代码的小鱼18 小时前
事务核心概念与隔离级别解析
java·开发语言·数据库