axios封装中间件和避免重复请求 · 常用笔记

# axios封装中间件和避免重复请求 ## 封装的axios中间件 ``` <pre class="calibre13">``` /\* \* .::::. \* .::::::::. \* ::::::::::: \* ..:::::::::::' \* '::::::::::::' \* .:::::::::: \* '::::::::::::::.. \* ..::::::::::::. \* ``:::::::::::::::: \* ::::``:::::::::' .:::. \* ::::' ':::::' .::::::::. \* .::::' :::: .:::::::'::::. \* .:::' ::::: .:::::::::' ':::::. \* .::' :::::.:::::::::' ':::::. \* .::' ::::::::::::::' ``::::. \* ...::: ::::::::::::' ``::. \* ````':. ':::::::::' ::::.. \* '.:::::' ':'````.. \* \* @Author: 洋宝儿 \* @Date: 2022-02-16 10:57:05 \* @Description: 封装axios 自定义配置 \* @FilePath: \\ViteDemo01\\src\\axiosintrnce\\axiosinterce.js \*/ import axios from "axios"; /\* 开关方式增加了参数 customOptions \*/ function myAxios(axiosconfig, customOptions) { // 返回是promise const service \= axios.create({ baseURL: 'http://localhost:8888', // 设置统一的请求前缀 timeout: 10000, // 设置统一的超时时长 }) /\* 采用第二种方式根据自定义配置设置是否开启重复请求的开关 \*/ let custom\_options \= Object.assign({ repeat\_request\_cancel: true, // 是否开启取消重复请求, 默认为 true }, customOptions); service.interceptors.request.use( config \=> { removePending(config); // addPending(config); custom\_options.repeat\_request\_cancel && addPending(config); // 采用第二种方式开关方式 return config; }, error \=> { return Promise.reject(error); } ); service.interceptors.response.use( response \=> { removePending(response.config); return response; }, error \=> { error.config && removePending(error.config); return Promise.reject(error); } ); return service(axiosconfig) } const pendingMap \= new Map(); /\*\* \* 生成每个请求唯一的键 \* @param {\*} config \* @returns string \*/ function getPendingKey(config) { let { url, method, params, data } \= config; if (typeof data \=== 'string') data \= JSON.parse(data); // response里面返回的config.data是个字符串对象 return \[url, method, JSON.stringify(params), JSON.stringify(data)\].join('&'); } /\*\* \* 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求 \* @param {\*} config \*/ function addPending(config) { const pendingKey \= getPendingKey(config); config.cancelToken \= config.cancelToken || new axios.CancelToken((cancel) \=> { if (!pendingMap.has(pendingKey)) { pendingMap.set(pendingKey, cancel); } }); } /\*\* \* 删除重复的请求 \* @param {\*} config \*/ function removePending(config) { const pendingKey \= getPendingKey(config); if (pendingMap.has(pendingKey)) { const cancelToken \= pendingMap.get(pendingKey); cancelToken(pendingKey); pendingMap.delete(pendingKey); } } export default myAxios ``` ``` ## vue测试使用 ``` <pre class="calibre14">```  axios页面触发请求 axios页面触发请求(无格式) import myAxios from "@/axiosintrnce/axiosinterce.js"; console.log(window.navigator.onLine); /\* json传输使用中间件的取消函数达到即使点了多次只有一次生效使用配置化取消重复请求 \*/ const submitBtn \= () \=> { sendPost() setTimeout(()\=>{ sendPost() },200) setTimeout(()\=>{ sendPost() },300) }; const sendPost \= () \=> { myAxios({ url: "/abc/sda", method: "post", data: { id: 256 }, }).then((res) \=> { console.log("result==>", res); }); }; /\*无格式传输\*/ const unsubmitBtn \= () \=> { myAxios({ url: "/abc/sda", method: "get", data: "id=11", headers: { "Content-Type": "application/x-www-form-urlencoded", }, }).then((res) \=> { console.log("result==>", res); }); }; ``` ```