JS实现请求防抖

实现一个函数：

  • 对于同一个请求，如果上一次接口还没有返回，不进行下一次调用
  • 接口返回后，调用该请求的所有回调函数

代码实现

  1. /**
  2.  * 请求控制，对于url请求未完成之前，不发起重复的请求
  3.  * @param {(options)=>Promise} asyncRequest fetch、axios等
  4.  * @param {number} maxRetryCount 最大重试次数
  5.  * @returns
  6.  */
  7. function reqDebounce(asyncRequest, maxRetryCount) {
  8.   // 收集每个请求的回调函数
  9.   const map = new Map();
  11.   // 记录每个请求重试的次数
  12.   const retryReqMap = new Map();
  14.   // 定义一个私有属性，用来判断是否是重试
  15.   const privateRetry = Symbol('retry');
  17.   // 返回一个Promise对象
  18.   return function request(options, retry) {
  19.     const { url, method, data } = options;
  21.     // 这里生成唯一key的规则可以自己改写
  22.     const onlyKey = `${method}_${url}_${data}`;
  24.     return new Promise((resolve, reject) => {
  25.       if (retry !== privateRetry) {
  26.         if (map.has(onlyKey)) {
  27.           map.get(onlyKey).push([resolve, reject]);
  28.           return;
  29.         } else {
  30.           map.set(onlyKey, [[resolve, reject]]);
  31.         }
  32.       }
  33.       asyncRequest(options)
  34.         .then(res => {
  35.           // 如果请求成功了，将重试次数清空
  36.           retryReqMap.set(onlyKey, 0);
  37.           // 调用url收集的所有回调函数
  38.           map.get(onlyKey).forEach(([resolveFunc]) => resolveFunc(res));
  39.           // 清空url收集的回调函数
  40.           map.set(onlyKey, []);
  41.         })
  42.         .catch(ex => {
  43.           // 已经重试的次数
  44.           let count = retryReqMap.get(onlyKey) || 0;
  46.           if (count < maxRetryCount) {
  47.             // 重试次数+1
  48.             retryReqMap.set(onlyKey, ++count);
  49.             console.log(`第${count}次尝试重新请求${url}`);
  50.             // 尝试重试
  51.             request(options, privateRetry);
  52.           } else {
  53.             // 达到了最大重试次数，执行reject回调函数
  54.             map.get(onlyKey).forEach(([_, rejectFunc]) => rejectFunc(ex));
  55.             retryReqMap.set(onlyKey, 0);
  56.           }
  57.         });
  58.     });
  59.   };
  60. }
JavaScript

测试

  1. // 模拟一个异步请求
  2. function AsyncRequest(options) {
  3.   const { url } = options;
  4.   console.log(`${url} is called.`);
  5.   // 实际开发的时候直接返回一个axios、fetch等
  6.   // return axios(url, options);
  8.   // 模拟axios、fetch等返回一个Promise对象
  9.   return new Promise((resolve, reject) => {
  10.     // 随机延迟2-5s
  11.     const timeout = Math.floor(Math.random() * 1) + 1;
  12.     // 模拟接口情况
  13.     setTimeout(() => {
  14.       Math.random() > 0.5 ? resolve(`${url} success`) : reject(`${url} error`);
  15.     }, timeout * 1e3);
  16.   });
  17. }
  19. // const request = reqDebounce(fetch, 3);
  20. const request = reqDebounce(AsyncRequest, 3);
  21. const opts = { method: 'get', data: 'testData' };
  22. const opts1 = { ...opts, url: 'url1' };
  23. const opts2 = { ...opts, url: 'url2' };
  24. request(opts1).then(console.log).catch(console.log);
  25. request(opts1).then(console.log).catch(console.log);
  26. request(opts2).then(console.log).catch(console.log);
  27. request(opts2).then(console.log).catch(console.log);
  29. // url1 is called.
  30. // url2 is called.
  31. // url1 success
  32. // url1 success
  33. // 第1次尝试重新请求url2
  34. // url2 is called.
  35. // 第2次尝试重新请求url2
  36. // url2 is called.
  37. // url2 success
  38. // url2 success
JavaScript

控制台打印结果不唯一，因为函数的成功与否是随机的

编程笔记 & 随笔杂谈