循序渐进实现Promise

Posted 玛尔斯通

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了循序渐进实现Promise相关的知识,希望对你有一定的参考价值。

使用javascript循序渐进实现一个简单的Promise,支持异步和then链式调用。
翻译并整理自Medium: Implementing a simple Promise in Javascript - by Zhi Sun

前言

在前端面试和日常开发中,经常会接触到Promise。并且在现如今的很多面试中,也会经常被要求手写Promise。

接下来,将使用JavaScript循序渐进实现一个简单的Promise,支持异步和then链式调用。

分析Promise

Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值,常用来实现异步操作。

Promise状态

Promise有三种状态:

  • pending

    初始状态

  • fulfilled

    执行成功后的状态

  • rejected

    执行失败后的状态

Promise状态只能由pending改变为fulfilled或者由pending改变为rejected,Promise状态改变的这一过程被称为settled,并且,状态一旦改变,后续就不会再次被改变。

Promise构造函数中的参数

Promise构造函数接收一个函数参数executor,该函数接收两个参数:

  • resolve
  • reject

执行resolve会将Promise状态由pending改变为fulfilled,并触发then方法中的成功回调函数onFulfilled

执行reject会将Promise状态由pending改变为rejected,并触发then方法中的失败回调函数onRejected

then方法中的回调函数参数

then方法接收两个参数:

  • onFulfilled

    成功回调函数,接收一个参数,即resolve函数中传入的值

  • onRejected

    失败回调函数,接收一个参数,即reject函数中传入的值

如果Promise状态变为fulfilled,就会执行成功回调函数onFulfilled;如果Promise状态变为rejected,就会执行失败回调函数onRejected

实现Promise

基础Promise

首先,constructor接收一个函数executor,该函数又接收两个参数,分别是resolvereject函数。

因此,需要在constructor中创建resolvereject函数,并传入executor函数中。

class MyPromise {
  constructor(executor) {
    const resolve = (value) => {};

    const reject = (value) => {};

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

其次,Promise会根据状态,执行对应的回调函数。最开始的状态为pending,当resolve时,状态由pending变为fulfilled;当reject时,状态由pending变为rejected

class MyPromise {
  constructor(executor) {
    this.state = \'pending\';

    const resolve = (value) => {
      if (this.state === \'pending\') {
        this.state = \'fulfilled\';
      }
    };

    const reject = (value) => {
      if (this.state === \'pending\') {
        this.state = \'rejected\';
      }
    };

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

Promise状态变更后,会触发then方法中对应的回调函数。如果状态由pending变为fulfilled,则会触发成功回调函数,如果状态由pending变为rejected,则会触发失败回调函数。

class MyPromise {
  constructor(executor) {
    this.state = \'pending\';
    this.value = null;

    const resolve = (value) => {
      if (this.state === \'pending\') {
        this.state = \'fulfilled\';
        this.value = value;
      }
    };

    const reject = (value) => {
      if (this.state === \'pending\') {
        this.state = \'rejected\';
        this.value = value;
      }
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === \'fulfilled\') {
      onFulfilled(this.value);
    }

    if (this.state === \'rejected\') {
      onRejected(this.value);
    }
  }
}

接下来可以写点测试代码测试一下功能

const p1 = new MyPromise((resolve, reject) => resolve(\'resolved\'));
p1.then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => reject(\'rejected\'));
p2.then(
  (res) => console.log(res),
  (err) => console.log(err) // rejected
);

但是,如果用以下代码测试,会发现什么也没有输出。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

p1.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject(\'rejected\'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

这是因为在调用then方法时,Promise仍处于pending状态。onFulfilledonRejected回调函数都没有被执行。

因此,接下来需要支持异步。

支持异步的Promise

为了支持异步,需要先保存onFulfilledonRejected回调函数,一旦Promise状态变化,立刻执行对应的回调函数。

⚠:这里有个细节需要注意,即onFulfilledCallbacksonRejectedCallbacks是数组,因为Promise可能会被调用多次,因此会存在多个回调函数。

class MyPromise {
  constructor(executor) {
    this.state = \'pending\';
    this.value = null;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === \'pending\') {
        this.state = \'fulfilled\';
        this.value = value;

        this.onFulfilledCallbacks.forEach((fn) => fn(value));
      }
    };

    const reject = (value) => {
      if (this.state === \'pending\') {
        this.state = \'rejected\';
        this.value = value;

        this.onRejectedCallbacks.forEach((fn) => fn(value));
      }
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === \'pending\') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }

    if (this.state === \'fulfilled\') {
      onFulfilled(this.value);
    }

    if (this.state === \'rejected\') {
      onRejected(this.value);
    }
  }
}

接下来可以用之前的测试代码测试一下功能

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

p1.then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject(\'rejected\'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => console.log(err) // rejected
);

但是如果用以下代码测试,会发现报错了。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

p1.then(
  (res) => console.log(res),
  (err) => console.log(err)
).then(
  (res) => console.log(res),
  (err) => console.log(err)
); // Uncaught TypeError: Cannot read property \'then\' of undefined

这是因为第一个then方法并没有返回任何值,然而却又连续调用了then方法。

因此,接下来需要实现then链式调用。

支持then链式调用的Promise

要想支持then链式调用,then方法需要返回一个新的Promise。

因此,需要改造一下then方法,返回一个新的Promise,等上一个Promise的onFulfilledonRejected回调函数执行完成后,再执行新的Promise的resolvereject函数。

class MyPromise {
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === \'pending\') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);
            resolve(fulfilledFromLastPromise);
          } catch (err) {
            reject(err);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);
            reject(rejectedFromLastPromise);
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === \'fulfilled\') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);
          resolve(fulfilledFromLastPromise);
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === \'rejected\') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);
          reject(rejectedFromLastPromise);
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}

接下来可以用以下代码测试一下功能

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

p1.then(
  (res) => {
    console.log(res); // resolved
    return res;
  },
  (err) => console.log(err)
).then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject(\'rejected\'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => {
    console.log(err); // rejected
    throw new Error(\'rejected\');
  }
).then(
  (res) => console.log(res),
  (err) => console.log(err) // Error: rejected
);

但是,如果改用以下代码测试,会发现第二个then方法中的成功回调函数并没有按预期输出(‘resolved’),而是输出了上一个then方法的onFulfilled回调函数中返回的Promise。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

p1.then(
  (res) => {
    console.log(res); // resolved
    return new MyPromise((resolve, reject) => {
      setTimeout(() => resolve(\'resolved\'), 1000);
    })
  },
  (err) => console.log(err)
).then(
  (res) => console.log(res), // MyPromise {state: "pending"}
  (err) => console.log(err)
);

这是因为onFulfilled/onRejected回调函数执行完之后,只是简单的将onFulfilled/onRejected执行完返回的值传入resolve/reject函数中执行,并没有考虑onFulfilled/onRejected执行完会返回一个新的Promise这种情况,所以第二次then方法的成功回调函数中直接输出了上一次then方法的成功回调函数中返回的Promise。因此,接下来需要解决这个问题。

首先,可以将以上测试代码改成另一种写法,方便梳理思路。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve(\'resolved\'), 1000);
});

const p2 = p1.then(
  (res) => {
    console.log(res);
    const p3 = new MyPromise((resolve, reject) => {
      setTimeout(() => resolve(\'resolved\'), 1000);
    });

    return p3;
  },
  (err) => console.log(err)
);

p2.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

可以看到,一共有三个Promise:

  • 第一个Promise

    即通过new构造出来的p1

  • 第二个Promise

    即通过调用then方法返回的p2

  • 第三个Promise

    即在p1.then方法的成功回调函数参数中返回的p3

现在的问题是,调用p2的then方法时,p3还处于pending状态。

要想实现p2.then方法中的回调函数能正确输出p3中resolve/reject之后的值,需要先等p3状态变化后再将变化后的值传入p2中的resolve/reject中即可。换句话说,三个Promise状态变化的先后顺序应该是p1 --> p3 --> p2。

class MyPromise {
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === \'pending\') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);

            if (fulfilledFromLastPromise instanceof MyPromise) {
              fulfilledFromLastPromise.then(resolve, reject);
            } else {
              resolve(fulfilledFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);

            if (rejectedFromLastPromise instanceof MyPromise) {
              rejectedFromLastPromise.then(resolve, reject);
            } else {
              reject(rejectedFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === \'fulfilled\') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);

          if (fulfilledFromLastPromise instanceof MyPromise) {
            fulfilledFromLastPromise.then(resolve, reject);
          } else {
            resolve(fulfilledFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === \'rejected\') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);

          if (rejectedFromLastPromise instanceof MyPromise) {
            rejectedFromLastPromise.then(resolve, reject);
          } else {
            reject(rejectedFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}

最终版Promise

最后,一个简单的Promise就完成了,支持异步和then链式调用。完整代码如下:

class MyPromise {
  constructor(executor) {
    this.state = \'pending\';
    this.value = null;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === \'pending\') {
        this.state = \'fulfilled\';
        this.value = value;
        this.onFulfilledCallbacks.forEach((fn) => fn(value));
      }
    };

    const reject = (value) => {
      if (this.state === \'pending\') {
        this.state = \'rejected\';
        this.value = value;
        this.onRejectedCallbacks.forEach((fn) => fn(value));
      }
    };

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === \'pending\') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);
            if (fulfilledFromLastPromise instanceof Promise) {
              fulfilledFromLastPromise.then(resolve, reject);
            } else {
              resolve(fulfilledFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);
            if (rejectedFromLastPromise instanceof Promise) {
              rejectedFromLastPromise.then(resolve, reject);
            } else {
              reject(rejectedFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === \'fulfilled\') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);
          if (fulfilledFromLastPromise instanceof Promise) {
            fulfilledFromLastPromise.then(resolve, reject);
          } else {
            resolve(fulfilledFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === \'rejected\') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);
          if (rejectedFromLastPromise instanceof Promise) {
            rejectedFromLastPromise.then(resolve, reject);
          } else {
            reject(rejectedFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}

以上是关于循序渐进实现Promise的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

前端面试题之手写promise

深入浅出写一个多级异步回调从基础到Promise实现的Demo

什么时候然后从Promise.all()的子句运行?

深入 Promise——Promise 实现详解

promise实现原理代码