之前做项目的时候经常遇到个问题：相同url相同参数的接口，短时间内重复请求调用。
产生的原因有多种：
按钮未做防抖/节流/锁,高频点击（实际上项目中所有按钮都加上防抖/节流/锁处理是不现实的）；
相同信息同页面的异构展示，每个地方独立获取数据（不够优雅的架构等）；
代码没优化好，但是历史代码逻辑复杂，不敢重构......
最开始想要做的优化方案是：对每一个请求做记录（通过url和param），请求发起前检测是否存在已发出的接口，如果有则打断。但是有一个问题，被打断的接口没有返回，不符合一些特殊的业务场景。
于是在原有的axios封装上不断优化，历时两天，终于撸出最终版：
image.png
目录结构如图。
首先封装工具函数：requestMeans.js
import qs from 'qs'; //参数编译
import { getToken } from '@/storage';
let pending = []; //用于存储每个ajax请求的取消函数和ajax标识
let task = {}; //用于存储每个ajax请求的处理函数，通过请求结果调用，以ajax标识为key
//请求开始前推入pending
export const pushPending = (item) => {
pending.push(item);
};
//请求完成后取消该请求，从列表删除
export const removePending = (e) => {
let key = e.baseURL + '?' + (e.method == 'post' ? e.data : qs.stringify(e.params));
for (let p in pending) {
if (pending[p].key === key) {
//当前请求在列表中存在时
pending[p].cancelToken(); //执行取消操作
pending.splice(p, 1); //把这条记录从列表中移除
}
}
};
// 创建task
export const createTask = (key, resolve) => {
let callback = (response) => {
if (response.data.status === -1) {
// 这里处理授权逻辑
} else if (response.data.status) {
// 这里做全局错误提示
}
resolve(response.data);
};
if (!task[key]) task[key] = [];
task[key].push(callback);
};
// 处理task
export const handleTask = (key, response) => {
for (let i = 0; task[key] && i < task[key].length; i++) {
task[key][i](response);
}
task[key] = undefined;
};
// data处理：存在token则加入
export const dataAddToken = (data) => {
const token = getToken();
if (token) {
data['token'] = token;
}
return data;
};
请求封装：request.js
import qs from 'qs'; //参数编译
import axios from 'axios';
import { pushPending, removePending, createTask, handleTask, dataAddToken } from './requestMeans';
const getHeaders = { 'Content-Type': 'application/json' };
const postHeaders = { 'Content-Type': 'application/x-www-form-urlencoded' };
const fileHeaders = { 'Content-Type': 'multipart/form-data' };
const baseURL = 'https://mock.apipost.cn/app/mock/project/f0a1c097-861b-473f-b0d4-a706fbe0af91';
//请求封装
export const request = (method, url, params, headers, preventRepeat = true, uploadFile = false) => {
let key = baseURL + url + '?' + qs.stringify(params);
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: baseURL + url,
headers,
timeout: 30 * 1000,
});
instance.interceptors.request.use(
(config) => {
if (preventRepeat) {
removePending(config); //防止多次触发请求
config.cancelToken = new axios.CancelToken((cancelToken) => {
pushPending({ key, cancelToken });
});
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
instance.interceptors.response.use(
(response) => {
if (preventRepeat) {
removePending(response.config);
}
return response;
},
(error) => {
return Promise.reject(error);
}
);
// 请求执行前加入task
createTask(key, resolve);
instance(Object.assign({}, { method }, method === 'post' || method === 'put' ? { data: !uploadFile ? qs.stringify(params) : params } : { params }))
.then((response) => {
// 处理task
handleTask(key, response);
})
.catch();
});
};
// 定义对外Get、Post请求
export default {
// 单独导出 用于put等非常规请求及需要特殊处理header的请求
request,
get(url, data = {}, preventRepeat = true) {
data = dataAddToken(data);
return request('get', url, data, getHeaders, preventRepeat, false);
},
post(url, data = {}, preventRepeat = true) {
data = dataAddToken(data);
return request('post', url, data, postHeaders, preventRepeat, false);
},
file(url, data = {}, preventRepeat = true) {
return request('post', url, data, fileHeaders, preventRepeat, true);
},
};
api封装：index.js
import Request from './request';
// 公用-获取验证码
export const postMerchantLoginCms = (data) => Request.post('/merchant/login/cms', data);
// 临时mock接口，用于测试封装功能
// export const getList = (data) => Request.get('/web-model-library/merchant/investigation', data);
export const getList = (data) => Request.post('/active/getRandModel', data);
使用方式：
import { getList } from "@/api";
methods: {
async getdata() {
let data =await getList({a:1});
},
}
作者：断律绎殇
链接：https://juejin.cn/post/7087787561447325732
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
