• Promise面试实战指北

    超时控制

    背景

    1. 众所周知，fetch请求是无法设置超时时间的，因此我们需要自己去模拟一个超时控制。

    2. 转盘问题，一个抽奖转盘动画效果有5秒，但是一般来说向后端请求转盘结果只需要不到一秒，因此请求结果至少得等5秒才能展现给用户。

    问题分析

    首先，超时控制比较简单，和Promise.race()的思想是类似，或者可以直接使用这个函数去解决。

    然后，转盘问题如果要答好，需要考虑两种情况。

    1. 转盘动画还未完成，请求结果已经拿到了，此时要等到动画完成再展示结果给用户。

    2. 转盘动画完成了，请求结果还未拿到，此时需要等待结果返回（可以设置请求超时时间）。

    所以，转盘问题更适合用Promise.all()来解决。

    实战版源码

    代码分为多个版本，从上自下，记忆难度递增但面试成绩更优，请按需选择。

    一、基于Promise.race()的超时控制。

    1. /**
    2.  * 超时控制版本一
    3.  */
    4.  
    5. /**
    6.  * 辅助函数，封装一个延时promise
    7.  * @param {number} delay 延迟时间
    8.  * @returns {Promise}
    9.  */
    10. function sleep(delay) {
    11.   return new Promise((resolve, reject) => {
    12.     setTimeout(() => reject(new Error("timeout")), delay);
    13.   });
    14. }
    15.  
    16. /**
    17.  * 将原promise包装成一个带超时控制的promise
    18.  * @param {()=>Promise} requestFn 请求函数
    19.  * @param {number} timeout 最大超时时间
    20.  * @returns {Promise}
    21.  */
    22. function timeoutPromise(requestFn, timeout) {
    23.   return Promise.race([requestFn(), sleep(timeout)]);
    24. }
    25.  
    26. // ----------下面是测试用例------------
    27.  
    28. // 模拟一个异步请求函数
    29. function createRequest(delay) {
    30.   return () =>
    31.     new Promise((resolve) => {
    32.       setTimeout(() => {
    33.         resolve("done");
    34.       }, delay);
    35.     });
    36. }
    37.  
    38. // 超时的例子
    39. timeoutPromise(createRequest(2000), 1000).catch((error) =>
    40.   console.error(error)
    41. );
    42. // 不超时的例子
    43. timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));
    44.  
    45. 复制代码

    二、将promise.race()干掉。

    1. /**
    2.  * 超时控制版本二
    3.  */
    4.  
    5. /**
    6.  * 辅助函数，封装一个延时promise
    7.  * @param {number} delay 延迟时间
    8.  * @returns {Promise}
    9.  */
    10. function sleep(delay) {
    11.   return new Promise((resolve, reject) => {
    12.     setTimeout(() => reject(new Error("timeout")), delay);
    13.   });
    14. }
    15.  
    16. /**
    17.  * 将原promise包装成一个带超时控制的promise
    18.  * @param {()=>Promise} requestFn 请求函数
    19.  * @param {number} timeout 最大超时时间
    20.  * @returns {Promise}
    21.  */
    22. function timeoutPromise(requestFn, timeout) {
    23.   const promises = [requestFn(), sleep(timeout)];
    24.   return new Promise((resolve, reject) => {
    25.     for (const p of promises) {
    26.       p.then((res) => resolve(res)).catch((error) => reject(error));
    27.     }
    28.   });
    29. }
    30.  
    31. // ----------下面是测试用例------------
    32.  
    33. // 模拟一个异步请求函数
    34. function createRequest(delay) {
    35.   return () =>
    36.     new Promise((resolve) => {
    37.       setTimeout(() => {
    38.         resolve("done");
    39.       }, delay);
    40.     });
    41. }
    42.  
    43. // 超时的例子
    44. timeoutPromise(createRequest(2000), 1000).catch((error) =>
    45.   console.error(error)
    46. );
    47. // 不超时的例子
    48. timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));
    49.  
    50. 复制代码

    三、基于Promise.all()的转盘问题（不考虑请求超时），和上面略有不同的是sleep函数超时后Promise从pending态转到fulfilled态而不是rejected态。

    1. /**
    2.  * 转盘问题不考虑超时
    3.  */
    4.  
    5. /**
    6.  * 辅助函数，封装一个延时promise
    7.  * @param {number} delay 延迟时间
    8.  * @returns {Promise}
    9.  */
    10. function sleep(delay) {
    11.   return new Promise((resolve) => {
    12.     setTimeout(() => resolve(delay), delay);
    13.   });
    14. }
    15.  
    16. /**
    17.  * 将原promise包装成一个转盘promise
    18.  * @param {()=>Promise} requestFn 请求函数
    19.  * @param {number} animationDuration 动画持续时间
    20.  * @returns {Promise}
    21.  */
    22. function turntablePromise(requestFn, animationDuration) {
    23.   return Promise.all([requestFn(), sleep(animationDuration)]);
    24. }
    25.  
    26. // ----------下面是测试用例------------
    27.  
    28. // 模拟一个异步请求函数
    29. function createRequest(delay) {
    30.   return () =>
    31.     new Promise((resolve) => {
    32.       setTimeout(() => {
    33.         resolve("done");
    34.       }, delay);
    35.     });
    36. }
    37.  
    38. // 请求比转盘动画快
    39. turntablePromise(createRequest(2000), 5000).then((res) => console.log(res));
    40.  
    41. // 请求比转盘动画慢
    42. turntablePromise(createRequest(2000), 1000).then((res) => console.error(res));
    43.  
    44. 复制代码

    四：基于Promise.all()的转盘问题（考虑请求超时），无非就是拼刀刀没什么亮点。

    1. /**
    2.  * 转盘问题考虑超时
    3.  */
    4.  
    5. /**
    6.  * 将原promise包装成一个带超时控制的promise
    7.  * @param {Promise} request 你的请求
    8.  * @param {number} timeout 最大超时时间
    9.  * @returns {Promise}
    10.  */
    11. function timeoutPromise(request, timeout) {
    12.   function sleep(delay) {
    13.     return new Promise((resolve, reject) => {
    14.       setTimeout(() => reject(new Error("timeout")), delay);
    15.     });
    16.   }
    17.   const promises = [request, sleep(timeout)];
    18.   return new Promise((resolve, reject) => {
    19.     for (const p of promises) {
    20.       p.then((res) => resolve(res)).catch((error) => reject(error));
    21.     }
    22.   });
    23. }
    24.  
    25. /**
    26.  * 将原promise包装成一个转盘promise
    27.  * @param {()=>Promise} requestFn 请求函数
    28.  * @param {number} timeout 超时时间
    29.  * @param {number} animationDuration 动画持续时间
    30.  * @returns {Promise}
    31.  */
    32. function turntablePromise(requestFn, timeout, animationDuration) {
    33.   function sleep(delay) {
    34.     return new Promise((resolve) => {
    35.       setTimeout(() => resolve(delay), delay);
    36.     });
    37.   }
    38.   return Promise.all([timeoutPromise(requestFn(), timeout), sleep(animationDuration)]);
    39. }
    40.  
    41. // ----------下面是测试用例------------
    42.  
    43. // 模拟一个异步请求函数
    44. function createRequest(delay) {
    45.   return () =>
    46.     new Promise((resolve) => {
    47.       setTimeout(() => {
    48.         resolve("done");
    49.       }, delay);
    50.     });
    51. }
    52.  
    53. // 请求比转盘动画慢且超时
    54. turntablePromise(createRequest(2000), 1500, 1000).catch((error) =>
    55.   console.error(error)
    56. );
    57.  
    58. 复制代码

    五：干掉Promise.all()，这版代码没有加什么核心的东西，无非就是手写一下这个api，所以留给大家自测。

    取消重复请求

    背景

    当用户频繁点击一个搜索Button时，会在短时间内发出大量的搜索请求，给服务器造成一定的压力，同时也会因请求响应的先后次序不同而导致渲染的数据与预期不符。这里，我们可以使用防抖来减小服务器压力，但是却没法很好地解决后面的问题。

    问题分析

    这个问题的本质在于，同一类请求是有序发出的（根据按钮点击的次序），但是响应顺序却是无法预测的，我们通常只希望渲染最后一次发出请求响应的数据，而其他数据则丢弃。因此，我们需要丢弃（或不处理）除最后一次请求外的其他请求的响应数据。

    实战版源码

    其实axios已经有了很好的实践，大家可以配合阿宝哥的文章来食用。此处取消promise的实现借助了上一章节的技巧，而在axios中因为所有异步都是由xhr发出的，所以axios的实现中还借助了xhr.abort()来取消一个请求。

    1. /**
    2.  * 取消请求
    3.  */
    4.  
    5. function CancelablePromise() {
    6.   this.pendingPromise = null;
    7. }
    8.  
    9. // 包装一个请求并取消重复请求
    10. CancelablePromise.prototype.request = function (requestFn) {
    11.   if (this.pendingPromise) {
    12.     this.cancel("取消重复请求");
    13.   }
    14.   const _promise = new Promise((resolve, reject) => (this.reject = reject));
    15.   this.pendingPromise = Promise.race([requestFn(), _promise]);
    16.   return this.pendingPromise;
    17. };
    18.  
    19. // 取消当前请求
    20. CancelablePromise.prototype.cancel = function (reason) {
    21.   this.reject(new Error(reason));
    22.   this.pendingPromise = null;
    23. };
    24.  
    25. // ----------下面是测试用例------------
    26.  
    27. // 模拟一个异步请求函数
    28. function createRequest(delay) {
    29.   return () =>
    30.     new Promise((resolve) => {
    31.       setTimeout(() => {
    32.         resolve("done");
    33.       }, delay);
    34.     });
    35. }
    36.  
    37.  
    38. const cancelPromise = new CancelablePromise();
    39.  
    40. // 前四个请求将被自动取消
    41. for (let i = 0; i < 5; i++) {
    42.   cancelPromise
    43.     .request(createRequest(1000))
    44.     .then((res) => console.log(res)) // 最后一个 done
    45.     .catch((err) => console.error(err)); // 前四个 error: 取消重复请求
    46. }
    47.  
    48. // 设置一个定时器等3s，让前面的请求都处理完再继续测试
    49. setTimeout(() => {
    50.   // 手动取消最后一个请求
    51.   cancelPromise
    52.     .request(createRequest(1000))
    53.     .then((res) => console.log(res))
    54.     .catch((err) => console.error(err)); // error:手动取消
    55.   cancelPromise.cancel("手动取消");
    56. }, 3000);
    57.  
    58. // 设置一个定时器等4s，让前面的请求都处理完再继续测试
    59. setTimeout(() => {
    60.   cancelPromise
    61.     .request(createRequest(1000))
    62.     .then((res) => console.log(res)) // done
    63.     .catch((err) => console.error(err));
    64. }, 4000);
    65.  
    66. 复制代码

    限制并发请求数

    背景

    一般来说，我们不会刻意去控制请求的并发。只有在一些场景下可能会用到，比如，收集用户的批量操作（每个操作对应一次请求），待用户操作完成后一次性发出。另外，为了减小服务器的压力，我们还会限制并发数。

    问题分析

    看上去，Promise.allSettled很适合应对这样的场景，但是稍微想一下就能发现，它能控制的粒度还是太粗了。首先，它必须等待所有Promise都resolve或reject，其次，如果有并发限制的话用它来做还需要分批请求，实际效率也会比较低，短木板效应很明显。

    实战版源码

    1. /**
    2.  * 限制并发请求数
    3.  */
    4.  
    5. /**
    6.  * 并发请求限制并发数
    7.  * @param {()=>Promise []} requestFns 并发请求函数数组
    8.  * @param {numer} limit 限制最大并发数
    9.  */
    10. function concurrentRequest(requestFns, limit) {
    11.   // 递归函数
    12.   function recursion(requestFn) {
    13.     requestFn().finally(() => {
    14.       if (_requestFns.length > 0) {
    15.         recursion(_requestFns.pop());
    16.       }
    17.     });
    18.   }
    19.   const _requestFns = [...requestFns];
    20.   // 限制最大并发量
    21.   for (let i = 0; i < limit && _requestFns.length > 0; i++) {
    22.     recursion(_requestFns.pop());
    23.   }
    24. }
    25.  
    26. // ----------下面是测试用例------------
    27.  
    28. // 模拟一个异步请求函数
    29. function createRequest(delay) {
    30.   return () =>
    31.     new Promise((resolve) => {
    32.       setTimeout(() => {
    33.         resolve("done");
    34.       }, delay);
    35.     }).then((res) => {
    36.       console.log(res);
    37.     });
    38. }
    39.  
    40. const requestFns = [];
    41. for (let i = 0; i < 10; i++) {
    42.   requestFns.push(createRequest(1000));
    43. }
    44.  
    45. concurrentRequest(requestFns, 3);
    46.  
    47. 复制代码

    管理全局loading态

    背景

    当我们一个页面或组件涉及到多个请求时，可能会对应多个loading态的管理。在某些场景下，我们只希望用一个loading态去管理所有异步请求，当任一存在pending态的请求时，展示全局loading组件，当所有请求都fulfilled或rejected时，隐藏全局loading组件。

    问题分析

    这个问题的关键就是在于我们需要管理所有pending态的请求，并适时更新loading态。

    实战版源码

    1. /**
    2.  * 管理全局loading态
    3.  */
    4.  
    5. function PromiseManager() {
    6.   this.pendingPromise = new Set();
    7.   this.loading = false;
    8. }
    9.  
    10. // 给每个pending态的promise生成一个身份标志
    11. PromiseManager.prototype.generateKey = function () {
    12.   return `${new Date().getTime()}-${parseInt(Math.random() * 1000)}`;
    13. };
    14.  
    15. PromiseManager.prototype.push = function (...requestFns) {
    16.   for (const requestFn of requestFns) {
    17.     const key = this.generateKey();
    18.     this.pendingPromise.add(key);
    19.     requestFn().finally(() => {
    20.       this.pendingPromise.delete(key);
    21.       this.loading = this.pendingPromise.size !== 0;
    22.     });
    23.   }
    24. };
    25.  
    26. // ----------下面是测试用例------------
    27.  
    28. // 模拟一个异步请求函数
    29. function createRequest(delay) {
    30.   return () =>
    31.     new Promise((resolve) => {
    32.       setTimeout(() => {
    33.         resolve("done");
    34.       }, delay);
    35.     }).then((res) => console.log(res));
    36. }
    37.  
    38. const manager = new PromiseManager();
    39.  
    40. // 增加多个请求
    41. manager.push(createRequest(1000), createRequest(2000), createRequest(3000));
    42. manager.push(createRequest(1500));
    43.  
    44. // 每秒轮询loading态，直到loading为false
    45. const id = setInterval(() => {
    46.   console.log(manager.loading);
    47.   if (!manager.loading) clearInterval(id);
    48. }, 1000);
    49.  
    50. // 增加多个请求
    51. manager.push(createRequest(2500));
    52. 复制代码

    加餐

    串行化的三种实现方式

    使用串行化的常见场景，请求之间有依赖关系或时序关系，如红绿灯。

    1. /**
    2.  * 串行化的三种实现
    3.  **/
    4.  
    5. // 法一，递归法
    6. function runPromiseInSeq1(requestFns) {
    7.   function recursion(requestFns) {
    8.     if (requestFns.length === 0) return;
    9.     requestFns
    10.       .shift()()
    11.       .finally(() => recursion(requestFns));
    12.   }
    13.   const _requestFns = [...requestFns];
    14.   recursion(_requestFns);
    15. }
    16. // 法二：迭代法
    17. async function runPromiseInSeq2(requestFns) {
    18.   for (const requestFn of requestFns) {
    19.     await requestFn();
    20.   }
    21. }
    22. // 法三：reduce
    23. function runPromiseInSeq3(requestFns) {
    24.   requestFns.reduce((pre, cur) => pre.finally(() => cur()), Promise.resolve());
    25. }
    26.  
    27. // 模拟一个异步请求函数
    28. function createRequest(delay) {
    29.   return () =>
    30.     new Promise((resolve) => {
    31.       setTimeout(() => {
    32.         resolve(delay);
    33.       }, delay);
    34.     }).then((res) => {
    35.       console.log(res);
    36.     });
    37. }
    38. // 执行顺序从左至右
    39. const requestFns = [
    40.   createRequest(3000),
    41.   createRequest(2000),
    42.   createRequest(1000),
    43. ];
    44. // 串行调用
    45. runPromiseInSeq1(requestFns);
    46. // runPromiseInSeq2(requestFns);
    47. // runPromiseInSeq3(requestFns);
    48.  
    49. 复制代码

    20行最简异步链式调用

    这里模拟了Promise的异步链式调用，代码出处见文章。

    1. function Promise(fn) {
    2.   this.cbs = [];
    3.  
    4.   const resolve = (value) => {
    5.     setTimeout(() => {
    6.       this.data = value;
    7.       this.cbs.forEach((cb) => cb(value));
    8.     });
    9.   }
    10.  
    11.   fn(resolve);
    12. }
    13.  
    14. Promise.prototype.then = function (onResolved) {
    15.   return new Promise((resolve) => {
    16.     this.cbs.push(() => {
    17.       const res = onResolved(this.data);
    18.       if (res instanceof Promise) {
    19.         res.then(resolve);
    20.       } else {
    21.         resolve(res);
    22.       }
    23.     });
    24.   });
    25. };
  • 相关阅读:
    SHELL （bash）编程记录
    (免费分享)基于springboot,vue在线考试系统
    Java 8 新特性 ---- Lambda 表达式
    分布式.数据库架构
    cmdline-tools component is missing
    ES6 的 export / import 常用方式总结
    TCP协议的相关机制
    WIFISKY 7层流控路由器 confirm.php RCE漏洞复现
    常用工具链和虚拟环境-msys2与mingw
    Java中高级面试题
  • 原文地址：https://blog.csdn.net/qq_41581588/article/details/126279570