​Promise面试实战指北

197次阅读  |  发布于3年以前

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

超时控制

背景

  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);
      }
    });
  });
};

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8