6.3 Promise.all、race、finally

6.3 Promise.all、Promise.race、Promise.finally

Promise 提供了多个静态方法，用于处理多个异步操作。其中，Promise.all、Promise.race 和 Promise.finally 是最常用的方法。本节将详细介绍这些方法的用法及其应用场景。

6.3.1 Promise.all

Promise.all 用于等待多个 Promise 全部成功，或任意一个失败。

1. 语法

Promise.all(iterable);

• iterable：一个可迭代对象（如数组），包含多个 Promise。
• 返回值：一个新的 Promise，当所有 Promise 成功时返回结果数组，当任意一个 Promise 失败时返回失败原因。

2. 示例

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 输出 [1, 2, 3]
  })
  .catch((error) => {
    console.log(error); // 不会执行
  });

3. 处理失败
如果任意一个 Promise 失败，Promise.all 会立即返回失败原因：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject("Error!");
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 不会执行
  })
  .catch((error) => {
    console.log(error); // 输出 "Error!"
  });

4. 应用场景

• 并行执行多个异步操作，等待所有操作完成。
• 需要多个异步操作的结果进行后续处理。

6.3.2 Promise.race

Promise.race 用于返回最先完成的 Promise（无论成功或失败）。

1. 语法

Promise.race(iterable);

• iterable：一个可迭代对象（如数组），包含多个 Promise。
• 返回值：一个新的 Promise，其状态和结果与最先完成的 Promise 相同。

2. 示例

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve("Promise 1"), 500);
});
const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve("Promise 2"), 1000);
});

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 输出 "Promise 1"
  })
  .catch((error) => {
    console.log(error); // 不会执行
  });

3. 处理失败
如果最先完成的 Promise 失败，Promise.race 会返回失败原因：

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve("Promise 1"), 500);
});
const promise2 = new Promise((_, reject) => {
  setTimeout(() => reject("Error!"), 400);
});

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 不会执行
  })
  .catch((error) => {
    console.log(error); // 输出 "Error!"
  });

4. 应用场景

• 设置超时机制，限制异步操作的执行时间。
• 竞争多个异步操作，选择最先完成的结果。

6.3.3 Promise.finally

Promise.finally 用于指定无论 Promise 成功或失败都会执行的回调函数。

1. 语法

promise.finally(callback);

• callback：一个无参数的回调函数，无论 Promise 成功或失败都会执行。
• 返回值：一个新的 Promise，其状态和结果与原 Promise 相同。

2. 示例

const promise = new Promise((resolve) => {
  setTimeout(() => resolve("Success!"), 1000);
});

promise
  .then((value) => {
    console.log(value); // 输出 "Success!"
  })
  .catch((error) => {
    console.log(error); // 不会执行
  })
  .finally(() => {
    console.log("Operation completed!"); // 输出 "Operation completed!"
  });

3. 处理失败
无论 Promise 成功或失败，finally 都会执行：

const promise = new Promise((_, reject) => {
  setTimeout(() => reject("Error!"), 1000);
});

promise
  .then((value) => {
    console.log(value); // 不会执行
  })
  .catch((error) => {
    console.log(error); // 输出 "Error!"
  })
  .finally(() => {
    console.log("Operation completed!"); // 输出 "Operation completed!"
  });

4. 应用场景

• 清理资源或执行收尾操作。
• 无论异步操作成功或失败，都需要执行的逻辑。

6.3.4 示例代码

示例 1：Promise.all

const fetchUser = () => Promise.resolve({ name: "Alice" });
const fetchPosts = () => Promise.resolve(["Post 1", "Post 2"]);

Promise.all([fetchUser(), fetchPosts()])
  .then(([user, posts]) => {
    console.log(user); // 输出 { name: "Alice" }
    console.log(posts); // 输出 ["Post 1", "Post 2"]
  })
  .catch((error) => {
    console.log(error);
  });

示例 2：Promise.race

const timeout = new Promise((_, reject) => {
  setTimeout(() => reject("Timeout!"), 500);
});
const fetchData = new Promise((resolve) => {
  setTimeout(() => resolve("Data fetched!"), 1000);
});

Promise.race([fetchData, timeout])
  .then((value) => {
    console.log(value); // 不会执行
  })
  .catch((error) => {
    console.log(error); // 输出 "Timeout!"
  });

示例 3：Promise.finally

const promise = new Promise((resolve) => {
  setTimeout(() => resolve("Success!"), 1000);
});

promise
  .then((value) => {
    console.log(value); // 输出 "Success!"
  })
  .finally(() => {
    console.log("Operation completed!"); // 输出 "Operation completed!"
  });

6.3.5 总结

• Promise.all：等待多个 Promise 全部成功，或任意一个失败。
• Promise.race：返回最先完成的 Promise。
• Promise.finally：无论 Promise 成功或失败，都会执行的回调函数。

通过掌握这些方法，你可以更灵活地处理多个异步操作，编写更健壮的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. Promise.all 和 Promise.race 的主要区别是什么？
2. 在什么情况下应该使用 Promise.finally？
3. 如何使用 Promise.race 实现超时机制？