利用 Promise.all 并行处理多个异步请求-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一门单线程语言，所以在处理多个异步请求时，往往会遇到阻塞的问题。而在前端开发中，我们经常需要处理多个异步请求，比如同时从不同的后端 API 获取数据。利用 Promise.all 方法，我们可以并行处理多个异步请求，让这些请求同时进行，避免阻塞问题，从而提高整个前端应用的性能和用户体验。

Promise.all 方法

Promise.all 方法是 ES6 引入的一种新的方法，可以同时处理多个异步任务。其接收一个数组作为参数，数组中的每个元素可以是一个 Promise 对象或者是一个普通值。Promise.all 方法会等待数组中的所有 Promise 对象状态变为 resolved 后，才会将结果传递给 then 方法。如果数组中的任意一个 Promise 对象状态变为 rejected，Promise.all 方法就会直接跳转到 catch 方法，不再等待其他 Promise 对象。

示例代码：

// javascriptcn.com 代码示例
const promises = [getA(), getB(), getC()];

Promise.all(promises)
  .then(([resultA, resultB, resultC]) => {
    console.log(resultA, resultB, resultC);
  })
  .catch(error => {
    console.error(error);
  });

利用 Promise.all 处理多个异步请求

假设我们需要从三个不同的后端 API 获取数据，并将这些数据在前端界面中进行展示。若按照传统的方法，我们需要对每个 API 发送一次请求，等待数据返回后再对下一个 API 发送请求，然后再等待数据返回……这样的处理方式可能会带来阻塞问题，导致用户等待时间长，并且代码的可读性和可维护性也不高。

利用 Promise.all 方法，我们可以很容易地并行处理这些请求并在所有请求完成后将结果展示给用户。示例代码如下：

// javascriptcn.com 代码示例
const apis = [
  'https://www.api-a.com',
  'https://www.api-b.com',
  'https://www.api-c.com'
];

const promises = apis.map(api => fetch(api));

Promise.all(promises)
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => {
    console.log(data);
    // 在这里将数据展示到前端界面中
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例代码中，我们首先定义了三个后端 API 的地址，然后通过 map 方法将每个 API 地址转成对应的 Promise 对象，之后通过 Promise.all 方法并行处理这些异步请求，并通过 then 方法将所有请求的响应数据解析成 json 格式。最后，我们可以将这些 json 数据展示到前端界面中。

使用 async/await 简化 Promise.all 的处理逻辑

利用 async/await 可以进一步简化 Promise.all 的处理逻辑，让代码更为简洁和易读。示例代码如下：

// javascriptcn.com 代码示例
const apis = [
  'https://www.api-a.com',
  'https://www.api-b.com',
  'https://www.api-c.com'
];

async function fetchData() {
  try {
    const responses = await Promise.all(apis.map(api => fetch(api)));
    const data = await Promise.all(responses.map(response => response.json()));
    console.log(data);
    // 在这里将数据展示到前端界面中
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在上面的示例代码中，我们首先定义了三个后端 API 的地址，然后定义了一个 async 函数 fetchData，这个函数会异步处理这些 API，并在所有请求完成后将响应数据展示到前端界面中。利用 async/await 的语法，我们可以像同步代码一样简单地处理异步请求，并且不再需要 then/catch 方法，从而让代码更为简洁和易读。

总结

利用 Promise.all 方法可以很方便地处理多个异步请求，让这些请求并行处理，并在所有请求完成后将结果传递给 then 方法。在前端开发中，我们经常需要从多个后端 API 获取数据，并将这些数据用于前端界面的展示。利用 Promise.all 可以避免阻塞问题，提高整个前端应用的性能和用户体验。同时，我们也可以利用 async/await 简化 Promise.all 的处理逻辑，让代码更为简洁和易读。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a3c007d4982a6ebc91162