手把手教你手写一个简明的Promise函数

前端

2023-10-07 06:45:05

前言

在JavaScript中，Promise是一个非常重要的概念，它可以帮助我们处理异步任务。Promise可以让我们在异步任务完成后执行某些操作，而不用像回调函数那样嵌套代码。这使得我们的代码更加易读和易于维护。

什么是Promise

Promise是一个对象，它表示一个异步操作的最终完成或失败的结果。Promise可以处于三种状态：

Pending：表示异步操作正在进行中，尚未完成。
Fulfilled：表示异步操作已成功完成。
Rejected：表示异步操作已失败。

如何使用Promise

Promise可以通过new Promise()来创建一个新的Promise对象。Promise对象有两个函数：

resolve：当异步操作成功完成时调用，表示Promise已完成。
reject：当异步操作失败时调用，表示Promise已失败。

我们可以在Promise对象上添加两个回调函数：

then：当Promise已完成或失败时调用，可以用来处理异步操作的结果。
catch：当Promise已失败时调用，可以用来处理异步操作的错误。

手写一个简明的Promise函数

我们现在来手写一个简明的Promise函数。

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

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

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

  executor(resolve, reject);
}

MyPromise.prototype.then = function (onFulfilled, onRejected) {
  if (this.state === 'pending') {
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);
  } else if (this.state === 'fulfilled') {
    onFulfilled(this.value);
  } else if (this.state === 'rejected') {
    onRejected(this.reason);
  }
};

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