我们一起聊聊如何使用 Promise.allSettled()判断接口请求完毕

Promise.allSettled() 方法会等待所有的 Promise 对象都完成（无论是成功还是失败），然后返回一个包含每个 Promise 结果的数组。

每个结果对象都包含了 status 属性，可以是 "fulfilled"（成功）或 "rejected"（失败），以及 value 或 reason 属性，分别表示成功或失败时的结果。

下面是一个具体的示例，展示如何使用 Promise.allSettled() 来判断多个接口请求是否全部完成：

1.1. 示例代码

假设我们需要从三个不同的 API 端点获取数据，并在所有请求完成后执行一些操作。

1.1.1. 定义请求函数

首先，定义一个函数来发起请求，并返回一个 Promise 对象。

function fetchAPI(url) {
  return fetch(url).then(response => {
    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }
    return response.json();
  });
}

1.1.2. 使用 Promise.allSettled()

接下来，使用 Promise.allSettled() 来等待所有的请求完成。

const apiUrls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

const fetchRequests = apiUrls.map(url => fetchAPI(url));

Promise.allSettled(fetchRequests)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Request ${index + 1} succeeded:`, result.value);
      } else {
        console.error(`Request ${index + 1} failed:`, result.reason);
      }
    });
    // 所有请求完成，可以在这里执行其他操作
    console.log('All requests have been processed.');
  })
  .catch(error => {
    console.error('An unexpected error occurred:', error);
  });

1.2. 代码解释

1. 定义请求函数：

• fetchAPI 函数接收一个 URL 参数，使用 fetch 发起请求，并返回一个 Promise。
• 如果请求成功，Promise 会被解析为 JSON 数据。
• 如果请求失败，Promise 会被拒绝，并抛出错误。

2. 使用 Promise.allSettled()：

• 创建一个包含所有请求的数组 fetchRequests。

• 使用 Promise.allSettled() 等待所有请求完成。

• results 数组包含了每个请求的结果对象，其中每个对象都有 status 和 value 或 reason 属性。

• 根据每个请求的状态，打印成功或失败的信息。

1.3. 总结

通过使用 Promise.allSettled()，你可以确保在所有请求完成之后再执行后续的操作。

这种方法的好处在于它能处理成功和失败的情况，并且提供了每个请求的完整结果，使得你可以根据每个请求的状态来做出相应的处理。

如果你需要在所有请求完成之后执行某些操作，可以将这些操作放在 Promise.allSettled() 的回调函数中。

此外，你还可以根据实际需求调整错误处理逻辑，例如记录错误信息或重新发起失败的请求。