ES11 中如何使用 Promise.all() 方法
在现代的前端开发中，异步编程是非常常见的。而 Promise 是一种用于异步编程的编程语言特性，它可以让我们更加方便地处理异步操作。在 ES11 中，Promise.all() 方法被引入，可以让我们更加方便地处理多个异步操作。
Promise.all() 简介
Promise.all() 方法接收一个由 Promise 对象组成的可迭代对象，返回一个新的 Promise 对象。当传入的所有 Promise 对象都成功时，返回的 Promise 对象才会成功，返回值是一个由所有 Promise 对象的返回值组成的数组；当传入的 Promise 对象中有一个失败时，返回的 Promise 对象就会失败，失败的原因是第一个失败的 Promise 对象的错误信息。
示例代码
下面是一个简单的示例代码：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then((result) => console.log(result)) // [1, 2, 3] .catch((err) => console.error(err));
在上面的代码中，我们创建了三个 Promise 对象，分别返回 1、2、3。然后我们使用 Promise.all() 方法将这三个 Promise 对象组合成一个新的 Promise 对象，并在 then() 方法中输出结果。由于所有的 Promise 对象都成功了，因此输出了一个包含 1、2、3 的数组。
下面是一个失败的示例代码：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject("error");
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3])
.then((result) => console.log(result))
.catch((err) => console.error(err)); // error在上面的代码中，我们将第二个 Promise 对象设置为失败。由于 Promise.all() 方法会返回第一个失败的 Promise 对象的错误信息，因此输出了一个字符串 "error"。
实际应用
Promise.all() 方法在实际应用中非常常见，可以用于同时发起多个异步请求，等待所有请求完成后再进行下一步操作。下面是一个使用 Promise.all() 方法实现并发请求的示例代码：
// javascriptcn.com 代码示例 const urls = [ "https://jsonplaceholder.typicode.com/posts/1", "https://jsonplaceholder.typicode.com/posts/2", "https://jsonplaceholder.typicode.com/posts/3", ]; const promises = urls.map((url) => fetch(url)); Promise.all(promises) .then((responses) => Promise.all(responses.map((res) => res.json()))) .then((data) => console.log(data)) .catch((err) => console.error(err));
在上面的代码中，我们首先定义了一个数组 urls，包含三个 URL 地址。然后我们使用 Array.map() 方法将每个 URL 地址映射为一个 Promise 对象，这些 Promise 对象被存储在一个数组 promises 中。接着我们使用 Promise.all() 方法将这些 Promise 对象组合成一个新的 Promise 对象，并在 then() 方法中将每个响应转换为 JSON 格式。最后输出所有的 JSON 数据。
总结
在本文中，我们介绍了 ES11 中的 Promise.all() 方法，它可以让我们更加方便地处理异步操作。我们讲解了 Promise.all() 方法的基本用法，并给出了一些示例代码。在实际应用中，Promise.all() 方法可以用于同时发起多个异步请求，等待所有请求完成后再进行下一步操作。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656a86ccd2f5e1655d2ef2b9