我们在项目开发中会遇到这么一种情况，就是当网络比较慢或者后端接口查询慢的时候，用户点击发送了一个请求，但是等半天了没得响应，就会多次点击，导致多个接口处于pending状态，这样会加重服务器的负担，消耗浏览器的性能。那么遇到问题我们怎么解决呢？如果我们项目中用的是axios进行发送请求方式的话，在后续发送请求时，判断之前的请求处于pending状态的接口，如果有相同请求则取消掉以前请求。然后再发送新的请求。
Axios 使用 CancelToken 取消请求查看axios api我们会看到axios.CancelToken方法可以进行取消请求，我们就对他进行封装使用
首先我们定义一个公共方法如下：
// 定义一个数组pending用于存储所有处于pending状态下的请求
let pending = []
// axios.CancelToken官网提供的api进行取消操作
const CancelToken = axios.CancelToken
// 公用方法
let removePending = (config) => {
for (let p in pending) {
// 如果pending中的请求和新请求一致时
if (pending[p].oldUrl === config.url JSON.stringify(config.data) '&' config.method) {
// 调用取消方法
pending[p].f()
// 删除pending已有的请求
pending.splice(p, 1)
}
}
}
那么我们有了公共方法如何使用呢，我们定义一个request.js文件，进行请求封封装拦截操作，完整代码如下
import Vue from 'vue'
import axios from "axios";
const url = ‘xxxxxxxxxxx’//请换成开发环境请求地址
// 定义一个数组pending用于存储所有处于pending状态下的请求
let pending = []
// axios.CancelToken官网提供的api进行取消操作
const CancelToken = axios.CancelToken
// 公用方法
let removePending = (config) => {
for (let p in pending) {
// 如果pending中的请求和新请求一致时
if (pending[p].oldUrl === config.url JSON.stringify(config.data) '&' config.method) {
// 调用取消方法
pending[p].f()
// 删除pending已有的请求
pending.splice(p, 1)
}
}
}
// 创建axios实例
const service = axios.create({
baseURL: url, // 开发环境跨域配置的地址
timeout: 30000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
config => {
// 在发送前执行一下取消操作
removePending(config)
// 这里把所有的pending请求添加到上面定义的pending数组
config.cancelToken = new CancelToken((c) => {
// 这里我是用请求地址&请求方式拼接的字符串，你可以用自己的方式灵活使用
pending.push({ oldUrl: config.url JSON.stringify(config.data) '&' config.method, f: c })
})
return config;
},
error => {
Promise.reject(error);
}
);
// response拦截器
service.interceptors.response.use(
response => {
// 在响应后再执行一下取消操作，把已经完成的请求从pending中移除
removePending(response.config)
return response.data;
},
error => {
return Promise.reject(error);
}
);
export default service;
然后在项目中引入文件request.js，进行接口处理就可以了
import fetch from './request.js'
// 查询机车作业记录
export function test(params) {
return fetch({
method: 'get',
url: '',
params
})
}
