哈喽比特
注册  |  登录
0
0

​Promise面试实战指北

发表于 3年以前  | 总阅读数：196 次

本文旨在使用一个易于理解、易于记忆的方式去吃透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);
      }
    });
  });
};

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/IuzMHuo_MtLraYAmwOnVDQ

 相关推荐

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前  |  648次阅读  |  详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯，称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息，亚马逊的一些股东，包括持有该公司股票的一家养老基金，日前对亚马逊、其创始人贝索斯和其董事会提起诉讼，指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于：1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站，以推广自家应用程序

据消息，为推广自家应用，苹果现推出了一个名为“Apps by Apple”的网站，展示了苹果为旗下产品（如 iPhone、iPad、Apple Watch、Mac 和 Apple TV）开发的各种应用程序。

发布于：1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满：“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价，引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金（Future Fund）管理合伙人加里·布莱克发帖称，降价是一种“短期麻醉剂”，会让潜在客户等待进一步降价。

发布于：1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦：拿到许可，继续对华出口

据外媒9月2日报道，荷兰半导体设备制造商阿斯麦称，尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效，但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于：1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作：为苹果提供卫星服务

近日，根据美国证券交易委员会的文件显示，苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元（约 4.65 亿元人民币）。用于在 2023-2025 年期间，发射卫星，进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于：1年以前  |  430次阅读  |  详细内容 »

𝕏（推特）调整隐私政策，可拿用户发布的信息训练 AI 模型

据报道，马斯克旗下社交平台𝕏（推特）日前调整了隐私政策，允许 𝕏 使用用户发布的信息来训练其人工智能（AI）模型。新的隐私政策将于 9 月 29 日生效。新政策规定，𝕏可能会使用所收集到的平台信息和公开可用的信息，来帮助训练 𝕏 的机器学习或人工智能模型。

发布于：1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归：替老同事们高兴，对行业也是好事

9月2日，荣耀CEO赵明在采访中谈及华为手机回归时表示，替老同事们高兴，觉得手机行业，由于华为的回归，让竞争充满了更多的可能性和更多的魅力，对行业来说也是件好事。

发布于：1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能（AI）系统，该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于：1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日，非营利组织纽约真菌学会（NYMS）发出警告，表示亚马逊为代表的电商平台上，充斥着各种AI生成的蘑菇觅食科普书籍，其中存在诸多错误。

发布于：1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏（原推特）新隐私政策提到：“在您同意的情况下，我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于：1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲，国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上，各大企业都带来了最新的理念和产品，而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于：1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别，除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品，具体内容为：“以我对我‘子公司’的了解，我认为 iPhone 15 跟 iPhone 14 不会有什么区别的，除了序（列）号变了，这个‘不要脸’的东西，这个‘臭厨子’。

发布于：1年以前  |  398次阅读  |  详细内容 »

扫码在手机上访问

为您提供高质量的文档
 相关文章
Android插件化方案 5年以前  |  237231次阅读
vscode超好用的代码书签插件Bookmarks 2年以前  |  8065次阅读
 目录

去登录