承诺一切（）-js教程-PHP中文网

承诺一切（）

碧海醫心

发布： 2025-01-21 13:04:18

原创

420人浏览过

承诺一切（）

深入理解JavaScript中的Promise.all()方法

Promise.all()是JavaScript中一个强大的工具，用于同时处理多个异步操作。它接收一个Promise可迭代对象（通常是数组），并返回一个新的Promise。只有当所有输入的Promise都成功解析时，这个新的Promise才会解析；如果任何一个Promise被拒绝，则新的Promise会立即被拒绝。本文将详细探讨Promise.all()的功能、语法、行为以及实际应用示例。

语法

Promise.all()的语法非常简洁：

<code class="javascript">Promise.all(iterable);</code>

登录后复制

其中：

iterable：一个包含Promise或值的数组或其他可迭代对象。非Promise值会被视为已解析的Promise。

返回值

该方法返回一个Promise，其行为如下：

如果iterable为空，则立即解析为一个空数组。
如果iterable中所有Promise都成功解析，则解析为一个包含所有已解析值的数组，且顺序与输入Promise的顺序一致。
如果任何一个Promise被拒绝，则立即被拒绝，并返回第一个被拒绝的Promise的错误信息，忽略其他Promise的结果。

解析和拒绝

解析 (Fulfillment): 当所有输入的Promise都成功解析时，Promise.all()会返回一个包含所有解析结果的数组，顺序与输入Promise一致。
拒绝 (Rejection): 如果任何一个输入的Promise被拒绝，Promise.all()会立即被拒绝，并返回导致拒绝的第一个Promise的错误信息。

实际示例

示例1：基本用法

本例创建三个Promise，分别在不同时间后解析：

AiTxt 文案助手

AiTxt 利用 Ai 帮助你生成您想要的一切文案，提升你的工作效率。

查看详情

<code class="javascript">const promise1 = new Promise((resolve) => setTimeout(() => resolve('one'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('two'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('three'), 3000));

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // 输出: ['one', 'two', 'three']
  .catch(error => console.error(error));</code>

登录后复制

Promise.all()等待所有三个Promise都解析完毕，然后将结果作为数组输出。

示例2：混合值

可以混合使用已解析值和Promise：

<code class="javascript">const p1 = Promise.resolve(42);
const p2 = Promise.resolve('hello');
const p3 = new Promise((resolve) => setTimeout(() => resolve('world'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values)) // 输出: [42, 'hello', 'world']
  .catch(error => console.error(error));</code>

登录后复制

p1和p2立即解析，p3在一秒后解析。

示例3：拒绝处理

如果一个Promise被拒绝，Promise.all()会立即拒绝：

<code class="javascript">const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('Failed!'));
const p3 = new Promise((resolve) => setTimeout(() => resolve('This will not run'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values))
  .catch(error => console.error(error.message)); // 输出: 'Failed!'</code>

登录后复制

由于p2被拒绝，整个操作失败，并输出错误信息。