​Promise面试实战指北

最新推荐文章于 2024-11-01 18:36:00 发布
最新推荐文章于 2024-11-01 18:36:00 发布
阅读量84 收藏
点赞数
分类专栏： csdn 文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76406747/article/details/128897702
版权
本文通过实例详细讲解了如何使用Promise进行超时控制、处理转盘问题、限制并发请求数以及管理全局loading状态。通过不同的Promise方法如race()和all()，结合实战代码展示了Promise在解决这些问题时的应用和技巧。
摘要由CSDN通过智能技术生成

本文旨在使用一个易于理解、易于记忆的方式去吃透promise相关应用侧的技术点，从而应用于简历和面试中。

比起其他大佬的文章，本文更注重于实战性，同时也会尽可能的去提高代码规范和质量（个人水平受限无法给出最优解）。俗话说的好，贪多嚼不烂，想要深入了解更多实现方法和细节的同学可以补充看更多更加优秀的文章。

超时控制

背景

  1. 众所周知，fetch请求是无法设置超时时间的，因此我们需要自己去模拟一个超时控制。
  2. 转盘问题，一个抽奖转盘动画效果有5秒，但是一般来说向后端请求转盘结果只需要不到一秒，因此请求结果至少得等5秒才能展现给用户。

问题分析

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

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

  1. 转盘动画还未完成，请求结果已经拿到了，此时要等到动画完成再展示结果给用户。
  2. 转盘动画完成了，请求结果还未拿到，此时需要等待结果返回（可以设置请求超时时间）。

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

实战版源码

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

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

/**
 * 超时控制版本一
 */

/**
 * 辅助函数，封装一个延时promise
 * @param {number} delay 延迟时间
 * @returns {Promise<any>}
 */
function sleep(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("timeout")), delay);
  });
}

/**
 * 将原promise包装成一个带超时控制的promise
 * @param {()=>Promise<any>} requestFn 请求函数
 * @param {number} timeout 最大超时时间
 * @returns {Promise<any>}
 */
function timeoutPromise(requestFn, timeout) {
  return Promise.race([requestFn(), sleep(timeout)]);
}

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    });
}

// 超时的例子
timeoutPromise(createRequest(2000), 1000).catch((error) =>
  console.error(error)
);
// 不超时的例子
timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));

复制代码

二、将promise.race()干掉。

/**
 * 超时控制版本二
 */

/**
 * 辅助函数，封装一个延时promise
 * @param {number} delay 延迟时间
 * @returns {Promise<any>}
 */
function sleep(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("timeout")), delay);
  });
}

/**
 * 将原promise包装成一个带超时控制的promise
 * @param {()=>Promise<any>} requestFn 请求函数
 * @param {number} timeout 最大超时时间
 * @returns {Promise<any>}
 */
function timeoutPromise(requestFn, timeout) {
  const promises = [requestFn(), sleep(timeout)];
  return new Promise((resolve, reject) => {
    for (const p of promises) {
      p.then((res) => resolve(res)).catch((error) => reject(error));
    }
  });
}

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    });
}

// 超时的例子
timeoutPromise(createRequest(2000), 1000).catch((error) =>
  console.error(error)
);
// 不超时的例子
timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));

复制代码

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

/**
 * 转盘问题不考虑超时
 */

/**
 * 辅助函数，封装一个延时promise
 * @param {number} delay 延迟时间
 * @returns {Promise<any>}
 */
function sleep(delay) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(delay), delay);
  });
}

/**
 * 将原promise包装成一个转盘promise
 * @param {()=>Promise<any>} requestFn 请求函数
 * @param {number} animationDuration 动画持续时间
 * @returns {Promise<any>}
 */
function turntablePromise(requestFn, animationDuration) {
  return Promise.all([requestFn(), sleep(animationDuration)]);
}

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    });
}

// 请求比转盘动画快
turntablePromise(createRequest(2000), 5000).then((res) => console.log(res));

// 请求比转盘动画慢
turntablePromise(createRequest(2000), 1000).then((res) => console.error(res));

复制代码

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

/**
 * 转盘问题考虑超时
 */

/**
 * 将原promise包装成一个带超时控制的promise
 * @param {Promise<any>} request 你的请求
 * @param {number} timeout 最大超时时间
 * @returns {Promise<any>}
 */
function timeoutPromise(request, timeout) {
  function sleep(delay) {
    return new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error("timeout")), delay);
    });
  }
  const promises = [request, sleep(timeout)];
  return new Promise((resolve, reject) => {
    for (const p of promises) {
      p.then((res) => resolve(res)).catch((error) => reject(error));
    }
  });
}

/**
 * 将原promise包装成一个转盘promise
 * @param {()=>Promise<any>} requestFn 请求函数
 * @param {number} timeout 超时时间
 * @param {number} animationDuration 动画持续时间
 * @returns {Promise<any>}
 */
function turntablePromise(requestFn, timeout, animationDuration) {
  function sleep(delay) {
    return new Promise((resolve) => {
      setTimeout(() => resolve(delay), delay);
    });
  }
  return Promise.all([timeoutPromise(requestFn(), timeout), sleep(animationDuration)]);
}

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    });
}

// 请求比转盘动画慢且超时
turntablePromise(createRequest(2000), 1500, 1000).catch((error) =>
  console.error(error)
);

复制代码

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

取消重复请求

背景

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

问题分析

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

实战版源码

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

/**
 * 取消请求
 */

function CancelablePromise() {
  this.pendingPromise = null;
}

// 包装一个请求并取消重复请求
CancelablePromise.prototype.request = function (requestFn) {
  if (this.pendingPromise) {
    this.cancel("取消重复请求");
  }
  const _promise = new Promise((resolve, reject) => (this.reject = reject));
  this.pendingPromise = Promise.race([requestFn(), _promise]);
  return this.pendingPromise;
};

// 取消当前请求
CancelablePromise.prototype.cancel = function (reason) {
  this.reject(new Error(reason));
  this.pendingPromise = null;
};

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    });
}


const cancelPromise = new CancelablePromise();

// 前四个请求将被自动取消
for (let i = 0; i < 5; i++) {
  cancelPromise
    .request(createRequest(1000))
    .then((res) => console.log(res)) // 最后一个 done
    .catch((err) => console.error(err)); // 前四个 error: 取消重复请求
}

// 设置一个定时器等3s，让前面的请求都处理完再继续测试
setTimeout(() => {
  // 手动取消最后一个请求
  cancelPromise
    .request(createRequest(1000))
    .then((res) => console.log(res))
    .catch((err) => console.error(err)); // error:手动取消
  cancelPromise.cancel("手动取消");
}, 3000);

// 设置一个定时器等4s，让前面的请求都处理完再继续测试
setTimeout(() => {
  cancelPromise
    .request(createRequest(1000))
    .then((res) => console.log(res)) // done
    .catch((err) => console.error(err));
}, 4000);

复制代码

限制并发请求数

背景

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

问题分析

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

实战版源码

/**
 * 限制并发请求数
 */

/**
 * 并发请求限制并发数
 * @param {()=>Promise<any> []} requestFns 并发请求函数数组
 * @param {numer} limit 限制最大并发数
 */
function concurrentRequest(requestFns, limit) {
  // 递归函数
  function recursion(requestFn) {
    requestFn().finally(() => {
      if (_requestFns.length > 0) {
        recursion(_requestFns.pop());
      }
    });
  }
  const _requestFns = [...requestFns];
  // 限制最大并发量
  for (let i = 0; i < limit && _requestFns.length > 0; i++) {
    recursion(_requestFns.pop());
  }
}

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    }).then((res) => {
      console.log(res);
    });
}

const requestFns = [];
for (let i = 0; i < 10; i++) {
  requestFns.push(createRequest(1000));
}

concurrentRequest(requestFns, 3);

复制代码

管理全局loading态

背景

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

问题分析

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

实战版源码

/**
 * 管理全局loading态
 */

function PromiseManager() {
  this.pendingPromise = new Set();
  this.loading = false;
}

// 给每个pending态的promise生成一个身份标志
PromiseManager.prototype.generateKey = function () {
  return `${new Date().getTime()}-${parseInt(Math.random() * 1000)}`;
};

PromiseManager.prototype.push = function (...requestFns) {
  for (const requestFn of requestFns) {
    const key = this.generateKey();
    this.pendingPromise.add(key);
    requestFn().finally(() => {
      this.pendingPromise.delete(key);
      this.loading = this.pendingPromise.size !== 0;
    });
  }
};

// ----------下面是测试用例------------

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve("done");
      }, delay);
    }).then((res) => console.log(res));
}

const manager = new PromiseManager();

// 增加多个请求
manager.push(createRequest(1000), createRequest(2000), createRequest(3000));
manager.push(createRequest(1500));

// 每秒轮询loading态，直到loading为false
const id = setInterval(() => {
  console.log(manager.loading);
  if (!manager.loading) clearInterval(id);
}, 1000);

// 增加多个请求
manager.push(createRequest(2500));
复制代码

加餐

串行化的三种实现方式

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

/**
 * 串行化的三种实现
 **/

// 法一，递归法
function runPromiseInSeq1(requestFns) {
  function recursion(requestFns) {
    if (requestFns.length === 0) return;
    requestFns
      .shift()()
      .finally(() => recursion(requestFns));
  }
  const _requestFns = [...requestFns];
  recursion(_requestFns);
}
// 法二：迭代法
async function runPromiseInSeq2(requestFns) {
  for (const requestFn of requestFns) {
    await requestFn();
  }
}
// 法三：reduce
function runPromiseInSeq3(requestFns) {
  requestFns.reduce((pre, cur) => pre.finally(() => cur()), Promise.resolve());
}

// 模拟一个异步请求函数
function createRequest(delay) {
  return () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(delay);
      }, delay);
    }).then((res) => {
      console.log(res);
    });
}
// 执行顺序从左至右
const requestFns = [
  createRequest(3000),
  createRequest(2000),
  createRequest(1000),
];
// 串行调用
runPromiseInSeq1(requestFns);
// runPromiseInSeq2(requestFns);
// runPromiseInSeq3(requestFns);

复制代码

20行最简异步链式调用

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

function Promise(fn) {
  this.cbs = [];

  const resolve = (value) => {
    setTimeout(() => {
      this.data = value;
      this.cbs.forEach((cb) => cb(value));
    });
  }

  fn(resolve);
}

Promise.prototype.then = function (onResolved) {
  return new Promise((resolve) => {
    this.cbs.push(() => {
      const res = onResolved(this.data);
      if (res instanceof Promise) {
        res.then(resolve);
      } else {
        resolve(res);
      }
    });
  });
};
御剑未来~
关注
专栏目录
Java面试进阶指北
m0_67394360的博客
07-29 1384
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。运气暂且不谈，就拿心态来说，千万不要因为面试失败而气馁或者说怀疑自己的能力，面试失败之后多总结一下失败的原因，后面你就会发现自己会越来越强大。.
【Java面试指北】单例模式
笨鸟先飞的博客
04-10 703
单线程和多线程下的单例模式
程序员面试指北（一）
马旭辉博客
11-09 630
面试技巧和注意事项 前言： 作为一个技术人员，如果你满足以下条件中的任意一个，你应该去看看更多的机会： 钱少活多离家远 没有发展空间 心受委屈了 以及 老板招你的时候，和你谈理想。现在，老板问你说：理想能赚钱吗？ 加班太多——都没有时间约会或者女朋友和别人跑了 你的女朋友在大兴，而你在密云 这个公司已经没有技术大牛了 必考题 首先说几个必考题! 请做一下...
java-面试指北PDF版本（最新）
05-25
java_面试指北PDF版本（最新）
Java JDBC 编程指北
2401_83641360的博客
03-25 973
当我们使用多线程时，每个线程如果都需要连接数据库来执行 SQL 语句，那么每个线程都得创建一个连接，然后在使用之后关闭。这个创建和关闭连接的过程是十分耗时的，一旦多线程并发时，就容易导致系统卡顿。针对这一问题，提出使用数据库连接池。数据库连接池，其实就相当于一个集合，是一个存放数据库连接的容器。当我们的系统初始化好之后，集合就被创建，集合中会申请一些连接对象，当用户来访问数据库时，从集合中获取连接对象，一旦用户访问完毕，就将连接对象返还给容器。
WEB 前端面试题 （实战）（大全）
m0_64191440的博客
02-07 1794
JavaScriptJS匿名函数就是没有名称的函数匿名函数在项目中主要有两种操作方式第一种形式就是将一个函数当成另一个函数的参数进行使用；// 用户单击的时候执行的操作})第二种形式就是将一个匿名函数赋值给变量进行调用，函数的一种声明方式自执行函数，就是函数在声明完成的同时就会立即执行的函数！自执行函数的特点是声明之后立即执行、只能在创建的同时执行一次无法再次调用执行自执行函数通常都是给网页初始化网页特效或者准备初始数据！;(function(){…}()) 使用较多;
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
2024前端面试系列——Vue面试题_描述下 vue 从初始化页面--修改数据--刷新页面 ui 的过程
2401_84419493的博客
04-28 937
但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。
vue3面试题：2024 最新前端 Vue 3
2401_84437170的博客
04-27 2424
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
Java面试突击.pdf
11-21
Java面试突击,是java面试必备的复习资料，总结的很到位。大家可以借鉴学习下。分为 1.1 如何准备一场面试 2.1 Java 基础知识 三 计算机网络常见面试点总结 四 Linux 五 MySQL 六 Redis
程序员面试指北：面试官视角
felix021的专栏
02-14 373
== 结构化面试 ==在字节跳动，我学到了如何使用结构化面试法来考查应聘者的技能。所谓结构化，指的是将各种知识技能做好划分，例如编程语言，操作系统，数据库，网络，算法，工程/架构设计，并...
系统设计面试面试指北
代码界的扛把子
04-12 780
系统设计在面试中一定是最让面试者头疼的事情之一。因为系统设计相关的问题通常是开放式的，所以没有标准答案。你在和面试官思想的交流碰撞中会慢慢优化自己的系统设计方案。理论上来说，系统设计面试也是和面试官一起一步一步改进原有系统设计方案的过程。 系统设计题往往也非常能考察出面试者的综合能力，回答好的话，很容易就能在面试中脱颖而出。不论是对于参加社招还是校招的小伙伴，都很有必要重视起来。 接下来，我会带着小伙伴们从我的角度出发来谈谈：如何准备面试中的系统设计部分。 由于文章篇幅有限，就不列举实际例子了，可能.
【Java】最全Java多线程面试指北
Slimshady的博客
06-26 1486
文章目录Java多线程基础知识并发编程的优缺点并发编程三要素出现线程安全问题的原因怎么保证多线程的运行安全并行和并发多线程的优缺点线程和进程进程线程进程与线程的区别上下文切换守护线程和用户线程如何在 Windows 和 Linux 上查找哪个线程cpu利用率最高？创建线程的四种方式继承 Thread 类实现 Runnable 接口实现 Callable 接口使用 Executors 创建线程池Runnable 和 Callable 区别run()和 start()区别Callable 和 Future?Fu
runtime面试指北——基本数据结构
FY_Fish的专栏
06-29 1174
引言 Objective-C是一门动态语言，在OC中方法的调用在编译期时并不能真正决定调用的是哪个方法。只有在真正运行时才会根据方法的名称找到对应的函数调用。也就是说只有编译器是不够的，还需要一个运行时系统 (runtime library) 来执行编译后的代码。而Objective-C语言的动态特性正是基于runtime。 &amp;gt; runtime官方指南 &amp;gt; runtime A...
快速创建一个微信小程序，详细步骤以及示范程序代码
elirlove1的博客
10-25 3224
创建一个微信小程序涉及前端和后端的搭建与联调。以下是一个快速创建微信小程序的详细步骤以及示范程序代码。
此版本的IDM不支持该类下载，请尝试将IDM更新至最新版本
10-29 496
平时可以正常使用，谷歌浏览器内用IDM下载突然提示不能用了，但是复制链接到IDM中新建任务不影响使用，推测可能和谷歌浏览器更新有关，打开谷歌浏览器的扩展工具，移除IDM Integration Module。然后打开IDM安装目录，找到IDMGCExt.crx，直接拖拽到浏览器扩展工具界面，再去下载就不会提示版本不支持了。原因 在于禁用扩展自动更新，扩展和软件版本要一致此版本的IDM不支持该类下载，请尝试将IDM更新至最新版本​​​​​​​
GIN 反向代理功能
最新发布
程序媛平平无奇的一天
11-01 326
此设置非常适合需要将请求动态代理到不同后端服务器的场景，同时处理跨域请求并确保并发访问的安全性。
2020年面试实战：async/await、Promise等知识点解析
"这是一份2020年的前端面试题集合，涵盖了async/await、Promise、let、var、const、call以及JSON等核心JavaScript知识点。面试题涉及到异步编程、作用域、对象引用和数据比较等多个方面。" 在这些面试题中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值