Promise 中的多并发请求处理技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会遇到需要同时发送多个请求的情况，比如同时获取多个接口数据。而在这种情况下，使用 Promise 可以方便地实现多并发请求的处理。本文将介绍 Promise 中的多并发请求处理技巧，包括如何控制并发数、如何处理请求异常等。

1. 控制并发数

在同时发送多个请求时，为了避免服务器压力过大，需要控制并发数。一般来说，同时发送 5-10 个请求是比较合理的。Promise 中可以使用 Promise.all 和 Promise.race 方法来控制并发数。

1.1 Promise.all

Promise.all 方法可以接收一个由 Promise 对象组成的数组作为参数，并在所有 Promise 对象都 fulfilled（或者其中一个 rejected）后返回一个新的 Promise 对象，其值是一个由所有 Promise 对象的值组成的数组。例如：

// www.javascriptcn.com code example
const promises = [promise1, promise2, promise3, promise4, promise5];

Promise.all(promises)
  .then(results => {
    // 处理返回结果
  })
  .catch(error => {
    // 处理异常情况
  });

在上面的代码中，Promise.all 方法接收一个由 5 个 Promise 对象组成的数组作为参数，然后等待所有 Promise 对象都 fulfilled 或者其中一个 rejected 后返回结果。如果所有 Promise 对象都 fulfilled，则结果是一个由所有 Promise 对象的值组成的数组；如果其中一个 Promise 对象 rejected，则结果为 rejected。

1.2 Promise.race

Promise.race 方法可以接收一个由 Promise 对象组成的数组作为参数，并在其中有任一 Promise 对象 fulfilled 或者 rejected 后返回一个新的 Promise 对象，其值是第一个 fulfilled 或者 rejected 的 Promise 对象的值。例如：

// www.javascriptcn.com code example
const promises = [promise1, promise2, promise3, promise4, promise5];

Promise.race(promises)
  .then(result => {
    // 处理返回结果
  })
  .catch(error => {
    // 处理异常情况
  });

在上面的代码中，Promise.race 方法接收一个由 5 个 Promise 对象组成的数组作为参数，然后等待其中任一 Promise 对象 fulfilled 或者 rejected 后返回结果。如果其中一个 Promise 对象 fulfilled，则结果是该 Promise 对象的值；如果其中一个 Promise 对象 rejected，则结果为 rejected。

2. 处理请求异常

在发送多个请求时，可能会遇到其中一个请求失败的情况。这时候，我们需要对请求异常进行处理。Promise 中可以使用 Promise.allSettled 方法来处理请求异常。

2.1 Promise.allSettled

Promise.allSettled 方法可以接收一个由 Promise 对象组成的数组作为参数，并在所有 Promise 对象都 fulfilled 或 rejected 后返回一个新的 Promise 对象，其值是一个由所有 Promise 对象的状态组成的数组。例如：

const promises = [promise1, promise2, promise3, promise4, promise5];

Promise.allSettled(promises)
  .then(results => {
    // 处理返回结果
  });

在上面的代码中，Promise.allSettled 方法接收一个由 5 个 Promise 对象组成的数组作为参数，然后等待所有 Promise 对象都 fulfilled 或 rejected 后返回结果。返回结果是一个由所有 Promise 对象的状态组成的数组，每个状态对象都包含以下属性：

status：Promise 对象的状态，可以是 "fulfilled" 或 "rejected"。
value：Promise 对象的值，如果状态为 "fulfilled"，则返回 Promise 对象的值；如果状态为 "rejected"，则返回 Promise 对象的异常信息。

根据返回结果，我们可以很方便地处理请求的异常情况，例如：

// www.javascriptcn.com code example
const promises = [promise1, promise2, promise3, promise4, promise5];

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === "fulfilled") {
        // 处理成功情况
        console.log(result.value);
      } else {
        // 处理异常情况
        console.error(result.value);
      }
    });
  });

在上面的代码中，我们遍历了所有 Promise 对象的状态对象，根据状态对象的 status 属性判断 Promise 对象的状态，然后根据状态对象的 value 属性处理 Promise 对象的值或异常信息。

3. 示例代码

下面是一个完整的示例代码，演示了如何使用 Promise 处理多并发请求，并处理请求异常情况。

// www.javascriptcn.com code example
const urls = [
  "https://jsonplaceholder.typicode.com/todos/1",
  "https://jsonplaceholder.typicode.com/todos/2",
  "https://jsonplaceholder.typicode.com/todos/3",
  "https://jsonplaceholder.typicode.com/todos/4",
  "https://jsonplaceholder.typicode.com/todos/5",
];

const fetchTodo = url => {
  return fetch(url).then(response => {
    if (!response.ok) {
      throw new Error(`Fetch error: ${response.status}`);
    }
    return response.json();
  });
};

const promises = urls.map(url => fetchTodo(url));

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === "fulfilled") {
        console.log(result.value);
      } else {
        console.error(result.value);
      }
    });
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们定义了一个包含 5 个接口地址的数组 urls，然后定义了一个 fetchTodo 函数，用于发送请求并返回 Promise 对象。然后，我们使用 map 方法将 urls 数组中的每个地址都转换为一个 Promise 对象，并将这些 Promise 对象组成一个数组 promises。最后，我们使用 Promise.allSettled 方法等待所有 Promise 对象都 fulfilled 或 rejected，并处理返回结果。如果其中有一个 Promise 对象 rejected，则我们会在控制台输出异常信息。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d593e9a941bf7134a927d8

Promise 中的多并发请求处理技巧