从手写PromiseA+开始，更好地理解日常使用Promise

前端

2023-10-21 22:12:02

前言

Promise是JavaScript中非常重要的一个对象，它被用来处理异步操作。与传统的回调函数相比，Promise具有更好的可读性和可维护性，因此在实际开发中得到了广泛的应用。

本文将以手写PromiseA+为基础，全面解析Promise的概念、原理和使用方式，帮助您更好地理解和掌握Promise，从而在日常开发中更加熟练地使用Promise进行异步编程。

Promise的概念

Promise是一个表示异步操作的最终完成或失败状态的对象。它有三个状态：

Pending（等待）： 表示异步操作正在进行中。
Fulfilled（已完成）： 表示异步操作成功完成。
Rejected（已拒绝）： 表示异步操作失败。

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

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, Promise!');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出: Hello, Promise!
});

在上面的例子中，我们创建了一个Promise对象，并通过setTimeout模拟了一个异步操作。当setTimeout执行完成后，我们调用resolve()方法将Promise的状态从Pending变为Fulfilled，并传递一个结果值'Hello, Promise!'。

然后，我们使用then()方法添加了一个回调函数，当Promise的状态变为Fulfilled时，这个回调函数就会被调用，并将resolve()方法传递的结果值作为参数。

Promise的原理

Promise的实现原理是基于事件循环（Event Loop）。事件循环是一个不断循环执行的系统，它负责处理各种事件，包括定时器事件、网络请求事件等。

当我们创建一个Promise对象时，它就会被添加到事件循环中。当Promise的状态发生变化时，事件循环就会触发相应的回调函数。

例如，在上面的例子中，当setTimeout执行完成后，事件循环就会触发resolve()方法对应的回调函数，并将结果值'Hello, Promise!'传递给回调函数。

Promise的使用

Promise的使用非常简单，主要通过then()方法来添加回调函数。then()方法接受两个参数，第一个参数是成功回调函数，第二个参数是失败回调函数。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, Promise!');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出: Hello, Promise!
}, (error) => {
  console.log(error);
});