揭开Promise、Async、Await的运行玄机，掌握异步编程精髓

2024-01-27 03:29:29

Promise与then

Promise是JavaScript中用来处理异步操作的强大工具。它提供了一种更好的方式来处理异步操作，使得代码更易于阅读和维护。

Promise有三个状态：

待定（pending）：Promise的初始状态。
已完成（fulfilled）：当异步操作成功完成时，Promise的状态变为已完成。
已拒绝（rejected）：当异步操作失败时，Promise的状态变为已拒绝。

Promise对象可以通过then方法来添加回调函数。当Promise的状态改变时，相应的回调函数就会被调用。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功！');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：成功！
});

在上面的示例中，我们创建了一个Promise对象，并使用setTimeout函数来模拟一个异步操作。当setTimeout函数执行完后，Promise的状态会变为已完成，并调用then方法中指定的回调函数，并将'成功！'作为参数传递给回调函数。

Promise(A+)与浏览器中Promise的差异

Promise(A+)是一个规范，它定义了Promise对象的行为。浏览器中实现的Promise对象遵循Promise(A+)规范，但在某些方面存在一些差异。

1. Promise(A+)规范允许Promise对象的状态从已完成变为待定，而浏览器中实现的Promise对象不允许这种情况发生。

2. Promise(A+)规范要求Promise对象的状态一旦改变就不可变，而浏览器中实现的Promise对象的状态可以在某些情况下发生改变。

3. Promise(A+)规范要求Promise对象的状态改变时，必须调用then方法中指定的回调函数，而浏览器中实现的Promise对象在某些情况下可能不会调用回调函数。

这些差异可能会导致一些问题，因此在使用Promise对象时，需要了解这些差异并加以注意。

Promise.resolve源码实现

Promise.resolve方法将一个值转换为Promise对象。如果参数是一个Promise对象，则直接返回该Promise对象。如果参数是一个普通值，则创建一个新的Promise对象，并将其状态设置为已完成，并将参数作为结果值。

Promise.resolve = function(value) {
  if (value instanceof Promise) {
    return value;
  }

  return new Promise((resolve) => {
    resolve(value);
  });
};

在上面的示例中，如果参数value是一个Promise对象，则直接返回该Promise对象。否则，创建一个新的Promise对象，并将其状态设置为已完成，并将value作为结果值。

Promise.all源码实现

Promise.all方法接收一个Promise对象数组作为参数，并返回一个新的Promise对象。当所有参数Promise对象都完成时，新Promise对象的状态变为已完成，并将其结果作为数组传递给回调函数。如果任何一个参数Promise对象的状态变为已拒绝，则新Promise对象的状态变为已拒绝，并将其原因作为参数传递给回调函数。

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    let results = [];
    let completedCount = 0;

    promises.forEach((promise, index) => {
      promise.then((result) => {
        results[index] = result;
        completedCount++;

        if (completedCount === promises.length) {
          resolve(results);
        }
      }).catch((reason) => {
        reject(reason);
      });
    });
  });
};

在上面的示例中，我们首先创建一个新的Promise对象。然后，我们遍历参数Promise对象数组，并为每个Promise对象添加回调函数。当某个Promise对象的状态改变时，相应的回调函数就会被调用。如果所有Promise对象都成功完成，则新Promise对象的状态变为已完成，并将结果作为数组传递给回调函数。如果任何一个Promise对象的状态变为已拒绝，则新Promise对象的状态变为已拒绝，并将其原因作为参数传递给回调函数。

Promise.any源码实现

Promise.any方法接收一个Promise对象数组作为参数，并返回一个新的Promise对象。当任何一个参数Promise对象完成时，新Promise对象的状态变为已完成，并将其结果作为参数传递给回调函数。如果所有参数Promise对象都状态变为已拒绝，则新Promise对象的状态变为已拒绝，并将其原因作为参数传递给回调函数。

Promise.any = function(promises) {
  return new Promise((resolve, reject) => {
    let errors = [];

    promises.forEach((promise) => {
      promise.then((result) => {
        resolve(result);
      }).catch((reason) => {
        errors.push(reason);

        if (errors.length === promises.length) {
          reject(errors);
        }
      });
    });
  });
};

在上面的示例中，我们首先创建一个新的Promise对象。然后，我们遍历参数Promise对象数组，并为每个Promise对象添加回调函数。当某个Promise对象的状态改变时，相应的回调函数就会被调用。如果任何一个Promise对象成功完成，则新Promise对象的状态变为已完成，并将结果作为参数传递给回调函数。如果所有参数Promise对象都状态变为已拒绝，则新Promise对象的状态变为已拒绝，并将其原因作为参数传递给回调函数。