ES6中Promise的全面解析(1)：揭开其三大状态之谜

2023-12-23 08:58:26

Promise：管理异步操作的强大利器

在现代的 JavaScript 开发中，Promise 已成为处理异步操作的利器。它为我们提供了管理和处理异步请求的标准化方式，使代码更易于理解和维护。

理解 Promise 的状态是使用它的前提。ES6 中的 Promise 有三种状态：Pending、Fulfilled 和 Rejected，它们反映了异步操作的进展。

Promise 的状态

1. Pending

Pending 是 Promise 的初始状态，表示 Promise 尚未完成。此时，异步操作尚未完成，Promise 也不知道是成功还是失败。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

console.log(promise.state); // "pending"

2. Fulfilled

Fulfilled 表示 Promise 已成功完成。异步操作已经完成，并且成功返回了结果。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  resolve("成功了！");
});

promise.then(result => {
  console.log(result); // "成功了！"
});

3. Rejected

Rejected 表示 Promise 以错误结束。异步操作已经完成，但是发生了错误。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  reject(new Error("出错了！"));
});

promise.catch(error => {
  console.log(error.message); // "出错了！"
});

使用 Promise 的状态

了解 Promise 的状态有助于编写更复杂的异步代码。您可以使用以下方法来处理不同的状态：

then()：用于处理 Fulfilled 状态，返回成功结果。
catch()：用于处理 Rejected 状态，返回错误信息。
finally()：无论 Promise 的状态如何，都会执行的操作。

Promise 在实践中的应用

Promise 在实际开发中有着广泛的应用场景，例如：

发送异步请求（例如 Fetch API）。
处理多个异步任务。
在事件循环中执行操作。

代码示例：

// 发送异步请求
fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

// 处理多个异步任务
const promises = [
  fetch("https://example.com/api/data1"),
  fetch("https://example.com/api/data2"),
  fetch("https://example.com/api/data3")
];

Promise.all(promises)
  .then(responses => {
    const data = responses.map(response => response.json());
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });