JavaScript 中的 Promise 模式：避免回调地狱-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们经常需要处理异步操作，例如从服务器获取数据、读取本地文件等。在处理异步操作时，回调函数是最常用的方法。然而，随着代码变得越来越复杂，回调函数嵌套的层数也会不断增加，导致代码难以维护和理解，这就是所谓的“回调地狱”。

为了解决这个问题，ES6 引入了 Promise，它是一种更为优雅和可读性更高的异步处理方式。

Promise 的基本概念

Promise 是一个对象，代表了一个异步操作的最终状态（成功或失败）。Promise 对象有三种状态：

pending（进行中）：初始状态，不是成功或失败状态。
fulfilled（已成功）：意味着操作成功完成。
rejected（已失败）：意味着操作失败。

Promise 对象一旦处于 fulfilled 或 rejected 状态，就称为 settled（已定型），不可再改变状态。Promise 对象的状态改变只能通过执行异步操作来改变。

Promise 的基本用法

使用 Promise 构造函数创建一个 Promise 实例：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(成功返回的数据);
  } else {
    reject(失败返回的原因);
  }
});

Promise 构造函数接受一个函数作为参数，该函数又接受两个参数：resolve 和 reject，它们是两个函数，用于改变 Promise 对象的状态。

resolve：将 Promise 对象的状态从 pending 改为 fulfilled。
reject：将 Promise 对象的状态从 pending 改为 rejected。

异步操作成功时，调用 resolve 函数并传递成功返回的数据；异步操作失败时，调用 reject 函数并传递失败返回的原因。

接下来，我们可以使用 then 方法来处理异步操作的结果：

promise.then(
  (成功返回的数据) => {
    // 处理成功的情况
  },
  (失败返回的原因) => {
    // 处理失败的情况
  }
);

then 方法接受两个函数作为参数，分别是处理成功和处理失败的情况。当 Promise 对象的状态变为 fulfilled 时，调用第一个函数；当 Promise 对象的状态变为 rejected 时，调用第二个函数。

Promise 的链式调用

Promise 还支持链式调用，这意味着可以在一个 Promise 对象的 then 方法中返回另一个 Promise 对象，实现多个异步操作的串联：

// www.javascriptcn.com code example
promise
  .then((data1) => {
    // 处理 data1
    return promise2;
  })
  .then((data2) => {
    // 处理 data2
    return promise3;
  })
  .then((data3) => {
    // 处理 data3
  })
  .catch((error) => {
    // 处理错误
  });

在上面的示例中，当 promise 对象的状态变为 fulfilled 时，调用第一个 then 方法，处理 data1，并返回 promise2 对象；当 promise2 对象的状态变为 fulfilled 时，继续调用下一个 then 方法，处理 data2，并返回 promise3 对象；当 promise3 对象的状态变为 fulfilled 时，调用最后一个 then 方法，处理 data3。如果在任何一个异步操作中出现了错误，则调用 catch 方法来处理错误。

Promise 的错误处理

Promise 对象的错误处理可以通过 catch 方法来实现。catch 方法接受一个函数作为参数，用于处理 Promise 对象的 rejected 状态：

promise.catch((error) => {
  // 处理错误
});

在链式调用中，错误处理可以在任何一个 then 方法中添加：

// www.javascriptcn.com code example
promise
  .then((data1) => {
    // 处理 data1
    return promise2;
  })
  .then((data2) => {
    // 处理 data2
    return promise3;
  })
  .then((data3) => {
    // 处理 data3
  })
  .catch((error) => {
    // 处理错误
  });

Promise.all 方法

Promise.all 方法接受一个 Promise 对象数组作为参数，当所有 Promise 对象都变为 fulfilled 状态时，返回一个新的 Promise 对象，其状态为 fulfilled；当任何一个 Promise 对象变为 rejected 状态时，返回的 Promise 对象状态为 rejected。

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    // 处理所有 Promise 对象的结果
  })
  .catch((error) => {
    // 处理错误
  });

在上面的示例中，当 promise1、promise2 和 promise3 都变为 fulfilled 状态时，调用 then 方法处理它们的结果；当任何一个 Promise 对象变为 rejected 状态时，调用 catch 方法处理错误。

Promise.race 方法

Promise.race 方法接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象，其状态为第一个变为 fulfilled 或 rejected 状态的 Promise 对象的状态。

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    // 处理第一个 Promise 对象的结果
  })
  .catch((error) => {
    // 处理错误
  });

在上面的示例中，当 promise1、promise2 和 promise3 中的任何一个变为 fulfilled 或 rejected 状态时，调用 then 方法或 catch 方法来处理结果或错误。

结语

Promise 是一种优雅和可读性更高的异步处理方式，它可以帮助我们避免回调地狱，使代码更加简洁和易于维护。掌握 Promise 对象的基本概念和用法，可以让我们更好地处理异步操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3c3dba941bf713471d7ed

JavaScript 中的 Promise 模式：避免回调地狱