【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题

处理网络请求时,我们经常会遇到需要中途取消请求的情况,比如用户在两个tab之间反复横跳的场景,如果每个接口都从头请求到结束,那必然会造成很大的服务压力。

AbortController是一个Web API,它提供了一个信号对象(AbortSignal),该对象可以用来取消与Fetch API相关的操作。当我们创建AbortController实例时,会自动生成一个与之关联的AbortSignal对象。我们可以将这个AbortSignal对象作为参数传递给fetch函数,从而实现对网络请求的取消控制。

javascript 复制代码
import axios from 'axios'
import QS from 'qs'//引入qs模块,用来序列化post类型的数据

// 创建map存储未返回response的接口请求
const pendingRequests = new Map();

const generateRequestKey = (config) => {
    // 处理请求数据,确保请求和响应时一致,response返回的config中可能存在序列化的data,需要转换成json格式,否则生成的key不一致
    const normalizeData = (data) => {
      if (typeof data === 'string') {
        try {
          return JSON.parse(data);
        } catch {
          return data;
        }
      }
      return data;
    };
    
    return [
      config.method,
      config.url,
      JSON.stringify(normalizeData(config.params) || {}),
      JSON.stringify(normalizeData(config.data) || {})
    ].join('|');
  };

axios.defaults.baseURL = '/';
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 如果需要跨域,可以设置withCredentials为true
axios.defaults.withCredentials = true; // 允许跨域请求时发送cookies


// 创建axios实例
const service = axios.create({
    baseURL: '/api', // api的base_url
    timeout: 10000,// 请求超时时间
    headers: {
        'Access-Control-Allow-Origin': '*',
        'strict-origin-when-cross-origin': '*',
        'Cache-Control': 'no-cache',
        'Content-Type': 'application/x-www-form-urlencoded',
        'userRole': 'WEB',
        'Accept-Language': i18n.locale || localStorage.getItem('Accept-Language')
    }
});

// 请求拦截器
service.interceptors.request.use(config => {
    config.headers['nh-token'] = localStorage.getItem('NH_TOKEN') || ""
    const token = localStorage.getItem('newToken') || ""
    if (token) config.headers['Authorization'] = 'Bearer ' + token // 新服务添加token
    
    // 生成请求key,用于取消重复的相同请求
    const requestKey = generateRequestKey(config, 'service.interceptors.request');
    // 如果存在相同请求,取消前一个
    if (pendingRequests.has(requestKey)) {
        const abortController = pendingRequests.get(requestKey);
        abortController.abort();
    }
    
    // 为当前请求创建新的控制器
    const controller = new AbortController();
    config.signal = controller.signal;
    pendingRequests.set(requestKey, controller);
    
    return config;
},
    error => {
        return Promise.error(error);
    })
// 响应拦截器
service.interceptors.response.use(
    response => {
        const requestKey = generateRequestKey(response.config, 'service.interceptors.response');
        pendingRequests.delete(requestKey);
        // console.log('Response=>', response.request.responseURL, response  );
        if (response.status === 200) {
            //result  0-正常  1-异常  10000-未登录 4000-系统异常
            if (response.data.result == 10000) {
                // 登录失败,跳转到首页,重新登录
                router.push({ path: '/login' })
                return Promise.resolve(response.data)
            } else {
                return Promise.resolve(response.data)
            }
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        if (error.name === 'AbortError') {
            console.log('请求已被取消:', error.message);
        }
        // 取消请求时,不执行这里的代码
        const requestKey = generateRequestKey(error.config || {});
        pendingRequests.delete(requestKey);
        if (error.status) {
            return Promise.reject(error.response);
        }
    })
export default service

在接口封装层按照如上进行,可以满足接口重复请求时,取消重复的操作。需要注意一点,config.data,从request层获取的是Object,但是从response层获取的是一个JSON化的String。所以通过normalizeData方法,进行数据解析,防止map找不到。

相关推荐
用户433845375692 分钟前
Promise深度解析,以及简易版的手写实现
前端
梦之云4 分钟前
state 状态相关
前端
梦之云8 分钟前
effect 副作用相关
前端
golang学习记13 分钟前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia35 分钟前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace1 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits1 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫1 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒2 小时前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀2 小时前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试