import axios from 'axios'; import { httpRequest, completeRequest, clearRequestList } from './options'; // 防止重复请求 + const service = axios.create({ baseURL: 'xxx/xxx', }); // 请求拦截器 service.interceptors.request.use(config => {}, error => {}) // 响应拦截器 service.interceptors.response.use(response => { completeRequest(response); // 2.响应请求回来执行 }, error => { clearRequestList(); // + }) // 导出请求 export function http(config) { return httpRequest(config, service); // 1.发送请求前执行 }
完整options.js
/** * 职责： 防止重复的网络请求 * */ let list = new Set(); // 1.请求队列 // 合并 方法 参数 url地址 function getUrl(config = {}) { // get请求 params参数 post请求 data参数, baseURL const { url, method, params, baseURL = '' } = config; const urlVal = url.replace(baseURL, ''); return `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}`; } // 处理 url地址 const getformatObjVal = (obj) => { obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj; var str = []; for (let p in obj) { if (obj.hasOwnProperty(p) && p !== '_t') { var item = obj[p] === null ? '' : obj[p]; // 处理null str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item)); } } return str.join('&'); } // 2.请求方法 export function httpRequest(config = {}, axios) { const url = getUrl(config); //3. 这里我们获取到了URL地址 if (list.has(url)) { // 4.查看请求队列是否有当前url地址 return Promise.reject('In the request'); // 5.在请求队列里面 取消当前请求， 返回Promise失败结果 } // 6. 请求队列没有当前url地址 发送请求并把url地址存入请求队列里 list.add(url); return Promise.resolve(axios); } /** * 请求响应回来执行这个函数 */ export function completeRequest(response = {}) { const { config } = response; // 1.response里面config能拿到配置参数 const url = getUrl(config); // 2.获取url地址 list.has(url) && list.delete(url); // 3.删除请求队列中的当前请求url地址 } /** * 清空所有请求队列 */ export function clearRequestList(error) { // error 可以获取到配置， 做一些操作。 list = new Set(); // 这里我就直接清空了 }
以上就是我实现防止网络请求的方式，之前我有使用过axios中CancelToken来进行取消请求；当会有一些问题。
需要配置请求文件，不友好，团队开发配置也比较麻烦。
需要给每个请求都配置CancelToken。 有两个方法使用它 具体可以参考官网文档
到此这篇关于JavaScript如何实现防止重复的网络请求的示例的文章就介绍到这了,更多相关JavaScript 防止重复的网络请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: