Typescript Promise.all 函数用法详解

Promise.all 函数的用法详解

Promise.all 是 JavaScript 中 Promise 对象的一个静态方法，用于将多个 Promise 实例包装成一个新的 Promise 实例。这个新的 Promise 实例会在所有传入的 Promise 实例都成功完成时才会成功，否则一旦有任何一个 Promise 实例失败，新的 Promise 实例就会立即失败。

用法

Promise.all(iterable)

• iterable：一个可迭代对象，如数组，其中包含多个 Promise 实例或类似 Promise 的对象（具有 then 方法的对象）。

返回值

• 返回一个新的 Promise 实例。
• 如果所有传入的 Promise 实例都成功完成，新的 Promise 实例会成功完成，并将所有 Promise 的返回值作为数组传递给 then 方法的回调函数。
• 如果任意一个传入的 Promise 实例失败，新的 Promise 实例会立即失败，并将第一个被拒绝的 Promise 的错误信息传递给 catch 方法的回调函数。

示例代码

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({"id": "1001", "sex": "男"});
  }, 2000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({"id": "1001", "age": 30});
  }, 1000);
});

Promise.all([promise1, promise2]).then(res => {
  console.log(res); // [{ "id": "1001", "sex": "男"}, { "id": "1001", "age": 30}]
});

使用场景说明

1. 并发数据获取

当需要从多个 API 或数据源同时获取数据时，可以使用 Promise.all。例如，一个页面可能需要同时从后端获取用户信息、订单信息和商品信息，此时可以将这三个异步请求包装成 Promise 对象，并使用 Promise.all 来等待它们全部完成。这样做的好处是可以并行处理这些请求，提高数据加载的效率。

2. 依赖关系处理

虽然 Promise.all 本身并不直接处理依赖关系，但在某些情况下，可以利用它来等待多个相互依赖的异步操作完成。例如，一个操作可能依赖于另外两个异步操作的结果，此时可以使用 Promise.all 来等待这两个操作完成后，再进行后续的操作。不过，在这种情况下，更推荐使用 async/await 语法来清晰地表示异步操作的顺序和依赖关系。

3. 错误处理

Promise.all 还用于处理多个异步操作中的错误。当同时执行多个异步操作，并且希望一旦有任何一个操作失败就立即捕获错误时，Promise.all 提供了便捷的机制。它会返回一个新的 Promise 对象，该对象在所有传入的 Promise 对象都成功完成时才会成功，否则一旦有任何一个 Promise 对象失败，新的 Promise 对象就会立即失败，并将第一个失败的 Promise 对象的原因作为失败原因。

4. 资源并行加载

在前端开发中，经常需要加载各种资源，如图片、CSS 文件、JavaScript 脚本等。使用 Promise.all 可以并行地加载这些资源，并在所有资源都加载完成后进行后续的操作，如渲染页面或执行某些初始化代码。

总的来说，Promise.all 是处理多个并发异步操作的强大工具，它提高了代码的可读性和可维护性，同时也提高了应用程序的性能和响应速度。在前端开发中，合理地使用 Promise.all 可以帮助开发者更好地管理和协调各种异步操作，从而构建出更加高效和稳定的 Web 应用。