JavaScript Promise 详细介绍

JavaScript 的 Promise 是一种用于异步计算的对象。一个 Promise 对象代表了一个可能还不可用的值，或者一个在未来某个时间点才可用的最终值。

Promise 的状态

Promise 对象可以处于三种状态之一：

• Pending：初始状态，既不是成功，也不是失败状态。
• Fulfilled：意味着操作成功完成。
• Rejected：意味着操作失败。

Promise 的使用

Promise 的基本用法如下：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作...
  if (/* 异步操作成功 */) {
    resolve(value); // 将结果传递给成功的回调函数
  } else {
    reject(error); // 将错误传递给失败的回调函数
  }
});

myPromise.then(
  function(value) {
    // 处理异步操作成功的结果
  },
  function(error) {
    // 处理异步操作失败的结果
  }
);

Promise 的链式调用

Promise 支持链式调用，可以顺序执行多个异步操作：

promise1.then(result => {
  // 第一个异步操作成功
  return promise2; // 返回另一个 Promise
}).then(result => {
  // 第二个异步操作成功
});

Promise 的经典例子

以下是一些使用 Promise 的经典例子：

1. 基本的 Promise 示例

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const sum = 4 + 5 + 'a';
    if (isNaN(sum)) {
      reject('Error while calculating sum.');
    } else {
      resolve(sum);
    }
  }, 2000);
});
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
}); // 

2. Promise 链式调用

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

promise1
  .then(result => {
    console.log(result);
    return promise2;
  })
  .then(result => {
    console.log(result);
    return promise3;
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  }); // 

3. Promise.all 示例

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.all([promise1, promise2, promise3])
  .then(result => {
    console.log('resolved', result);
  })
  .catch(error => {
    console.log('rejected', error); // rejected promise2 failure
  }); // 

4. Promise.race 示例

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.race([promise1, promise2, promise3])
  .then(result => {
    console.log('resolved', result); // resolved promise2 success
  })
  .catch(error => {
    console.log('rejected', error);
  }); // 

5. Promise.allSettled 示例

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
  // 输出结果将包含每个 Promise 的状态（fulfilled 或 rejected）和值
}); // 

Promise 的源码实现

Promise 的核心在于其构造函数和 then 方法的实现。以下是一个简化的 Promise 构造函数的实现：

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

    try {
      executor(this._resolve, this._reject);
    } catch (err) {
      this._reject(err);
    }
  }

  _resolve = (value) => {
    // ...
  };

  _reject = (reason) => {
    // ...
  };

  then(onFulfilled, onRejected) {
    // ...
    return new MyPromise((resolve, reject) => {
      // ...
    });
  }
}

这个简化的实现展示了 Promise 的基本结构，包括状态管理、值的传递以及异步回调的注册。

总结

Promise 是 JavaScript 中处理异步操作的强大工具，它允许我们以一种更直观和可维护的方式编写异步代码。通过链式调用和组合使用 Promise 的各种方法，我们可以有效地管理和执行复杂的异步任务。