JavaScript Promise用法总结

在 JavaScript 中，Promise 是一个代表异步操作的最终完成或失败的对象。它提供了一种处理异步操作的方法，使得异步代码可以像同步代码一样进行编程。Promise 有三种状态：pending（待定）、fulfilled（实现）和 rejected（拒绝）。

一、基本用法

Promise 的构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。当异步操作成功时，调用 resolve 函数并将结果作为参数传递出去；当异步操作失败时，调用 reject 函数并将错误作为参数传递出去。

下面是一个简单的 Promise 示例：

const promise = new Promise((resolve, reject) => {
  const success = true;
  const result = '异步操作成功的结果';
  if (success) {
    resolve(result);
  } else {
    reject(new Error('异步操作失败'));
  }
});
promise.then((value) => {
  console.log(value); // 输出：'异步操作成功的结果'
}).catch((error) => {
  console.log(error.message); // 输出：'异步操作失败'
});

二、常见用法

1. Promise.all

Promise.all 方法接受一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。只有当数组中所有的 Promise 对象都变成 fulfilled（实现）状态时，返回的 Promise 对象才会变成 fulfilled（实现）状态，此时数组中所有 Promise 对象的返回值组成一个数组，传递给返回的 Promise 对象的回调函数。如果数组中任何一个 Promise 对象变成 rejected（拒绝）状态，返回的 Promise 对象立即变成 rejected（拒绝）状态，此时第一个被 reject 的实例的返回值，会传递给返回的 Promise 对象的回调函数。

下面是一个 Promise.all 的示例：

const promise1 = Promise.resolve(1); // 异步操作成功并返回 1
const promise2 = Promise.reject(new Error('异步操作失败')); // 异步操作失败并抛出错误
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(3), 1000);
}); // 异步操作延迟 1 秒后返回 3
Promise.all([promise1, promise2, promise3]).then(([value1, value2, value3]) => {
  console.log(value1); // 输出：1
  console.log(value2); // 输出：undefined
  console.log(value3); // 输出：3
}).catch((error) => {
  console.log(error.message); // 输出：'异步操作失败'
});

1. Promise.race

Promise.race 方法接受一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。只有当数组中任何一个 Promise 对象首先变成 fulfilled（实现）或 rejected（拒绝）状态时，返回的 Promise 对象才会变成相应的状态，此时第一个变成该状态的那个 Promise 对象的返回值或错误，会传递给返回的 Promise 对象的回调函数。

下面是一个 Promise.race 的示例：

```javascript
const promise1 = new Promise((resolve, reject) => {\n setTimeout(() => resolve(1), 500);\n}); // 异步操作延迟半秒后返回 1\nconst promise2 = new Promise((resolve, reject) => {\n setTimeout(() => reject(new Error(‘异步操作失败’)), 1000);\n}); // 异步操作延迟1秒后抛出错误\nPromise.race([promise1, promise2]).then((value) => {\n console.log(value); // 输出：1\n}).catch((error) => {\n console.log(error.message); // 输出：’异步操作失败’\n});