从零开始理解前端的 Promise

2023-11-17 14:13:19

作为一名前端开发工程师，我们每天都会遇到各种各样的异步操作，如发送网络请求、读取文件、处理定时任务等。这些操作的特点是不会立即返回结果，而是在一段时间后才返回。为了处理这些异步操作，我们可以使用 Promise 对象。

Promise 的概念

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

Pending： 异步操作还没有完成。
Fulfilled： 异步操作已成功完成。
Rejected： 异步操作已失败。

Promise 的使用

要使用 Promise，我们需要先创建一个 Promise 对象。我们可以使用 new Promise() 函数来创建一个 Promise 对象。例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作的代码
  if (异步操作成功) {
    resolve(结果);
  } else {
    reject(错误);
  }
});

在上面的代码中，我们创建了一个 Promise 对象，并传入了一个函数作为参数。这个函数有两个参数：resolve 和 reject。resolve 函数用于将异步操作的结果传递给 Promise 对象，reject 函数用于将异步操作的错误传递给 Promise 对象。

当异步操作完成后，我们需要调用 resolve 或 reject 函数来告诉 Promise 对象异步操作的结果。例如：

if (异步操作成功) {
  promise.resolve(结果);
} else {
  promise.reject(错误);
}

当 Promise 对象收到异步操作的结果或错误后，它就会改变自己的状态。如果异步操作成功，Promise 对象的状态就会变成 Fulfilled；如果异步操作失败，Promise 对象的状态就会变成 Rejected。

我们可以使用 then() 方法来监听 Promise 对象的状态变化。then() 方法有两个参数：onFulfilled 和 onRejected。onFulfilled 函数用于处理 Promise 对象处于 Fulfilled 状态时的情况，onRejected 函数用于处理 Promise 对象处于 Rejected 状态时的情况。例如：

promise.then(onFulfilled, onRejected);

在上面的代码中，我们使用 then() 方法来监听 Promise 对象的状态变化。当 Promise 对象处于 Fulfilled 状态时，我们会调用 onFulfilled 函数来处理结果；当 Promise 对象处于 Rejected 状态时，我们会调用 onRejected 函数来处理错误。

Promise 的好处

使用 Promise 有很多好处，包括：