寒冬三年经验面试试炼：Promise篇手写题精粹

见解分享

2023-09-09 06:32:58

如何在面试中驾驭 Promise 手写题：必备知识和解答

准备手写题：不可或缺

无论寒冬酷暑，求职前做足准备至关重要。作为拥有三年面试经验的前端工程师，我深知手写题是求职环节中一个相对容易准备的部分。大多数公司考察的题目都集中在一定范围内，因此，针对性地准备手写题，可以大幅提高你的面试成功率。

Promise：异步编程的利器

Promise 是 JavaScript 中处理异步编程的利器，在面试中经常被用来考察求职者的异步编程能力。下面，我们就来探讨一些常见的面试题：

1. 实现一个 Promise

实现一个 Promise 类的代码如下：

function myPromise(executor) {
  this.status = 'pending';
  this.value = undefined;
  this.reason = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  const resolve = (value) => {
    if (this.status !== 'pending') return;
    this.status = 'fulfilled';
    this.value = value;
    this.onFulfilledCallbacks.forEach(cb => cb(value));
  };

  const reject = (reason) => {
    if (this.status !== 'pending') return;
    this.status = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach(cb => cb(reason));
  };

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

2. Promise 的 then 方法

Promise 的 then 方法用于添加回调函数，处理 Promise 的结果。它的代码实现如下：

Promise.prototype.then = function(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.status === 'fulfilled') {
      setTimeout(() => {
        try {
          const result = onFulfilled(this.value);
          resolvePromise(result, resolve, reject);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.status === 'rejected') {
      setTimeout(() => {
        try {
          const result = onRejected(this.reason);
          resolvePromise(result, resolve, reject);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  });
};

3. Promise 的 catch 方法

Promise 的 catch 方法用于处理 Promise 拒绝时的回调函数，其代码实现如下：

Promise.prototype.catch = function(onRejected) {
  return this.then(undefined, onRejected);
};

4. Promise.all

Promise.all 用于处理多个 Promise 并行执行的情况，其代码实现如下：

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let count = 0;
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(value => {
        results[i] = value;
        count++;
        if (count === promises.length) {
          resolve(results);
        }
      }).catch(reason => {
        reject(reason);
      });
    }
  });
};

5. Promise.race

Promise.race 用于处理多个 Promise 竞争执行的情况，其代码实现如下：

Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(value => {
        resolve(value);
      }).catch(reason => {
        reject(reason);
      });
    }
  });
};