Vue路由切换 & Axios接口取消重复请求

在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决

场景

订单数据条件筛选查询

表单提交按钮频繁点击

路由页面切换请求未取消

解决方案:

在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求(或者特定的请求,可以通过在请求头中加字段)的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成的清除存储标记。

axios中如何取消请求

1、可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:

javascript 复制代码
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
 
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});
 
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
 
// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

javascript 复制代码
const CancelToken = axios.CancelToken;
let cancel;
 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
 
// cancel the request
cancel();

项目中封装使用。

javascript 复制代码
const pendingXHRMap = new Map();

/**
 * 添加请求
 * @param {Object} config
 */
export const addPendingXHR = (config) => {
  const url = [
    config.method,
    config.url
  ].join("&");
  config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
    if (!pendingXHRMap.has(url)) { // 如果 pending 中不存在当前请求,则添加进去
      pendingXHRMap .set(url, cancel);
    }
  });
};

// 删除请求记录
/**
 * 移除请求
 * @param {Object} config;
 */
export const removePendingXHR = (config) => {
  const url = [
    config.method,
    config.url
  ].join("&");
  if (pendingXHRMap.has(url)) { // 如果在 pending 中存在当前请求标识,需要取消当前 请求,并且移除
    const cancel = pendingXHRMap.get(url);
    cancel(url);
    pendingXHRMap .delete(url);
  }
};

axios中使用:

javascript 复制代码
// 请求拦截处理
axios.interceptors.request.use(config => {
    // 这里根据自定义的请求头进行判断
    removePendingXHR(config)
    addPendingXHR(config)
    ...
    return config
})
 
// 响应拦截处理
axios.interceptors.response.use(response => {
    removePendingXHR(response)
    ...
}, error => {
})

Vue中当路由切换页面的时候,将上一个页面的所有请求取消。

javascript 复制代码
router.beforeEach((to, from, next) => {
    // 遍历pendingMap,将上一个页面的所有请求cancel掉
    pendingXHRMap.forEach((cancel) => {
        cancel();
    });
    pendingXHRMap.clear()
})
相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风2 小时前
关于手机的设备信息
前端
ReturnTrue8682 小时前
nginx性能优化之Gzip
前端
华仔啊2 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮3 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇3 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort3 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript