前端如何判断多个请求完毕

在前端开发中，经常会遇到需要同时发起多个异步请求，并在所有请求都完成后再进行下一步操作的情况。

这里有几个常用的方法来实现这一需求：

使用 Promise.all()

Promise.all() 方法接收一个 Promise 对象的数组作为参数，当所有的 Promise 对象的状态都变为 resolved 或者只要有一个变为 rejected 时，Promise.all() 返回的 Promise 实例就会结束。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');

Promise.all([request1, request2, request3])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(results => {
    // 所有请求完成，处理结果
    console.log(results);
  })
  .catch(error => {
    // 如果任何一个请求失败，则捕获错误
    console.error('An error occurred:', error);
  });

使用 Promise.allSettled()

Promise.allSettled() 方法类似于 Promise.all()，但它等待所有的 Promise 都完成（无论成功还是失败），并且返回一个包含每个 Promise 的结果的对象数组。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');

Promise.allSettled([request1, request2, request3])
  .then(results => {
    // 所有请求完成，处理结果
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Success:', result.value);
      } else {
        console.error('Failed:', result.reason);
      }
    });
  });

使用 Promise.race()

Promise.race() 方法接收一个 Promise 对象的数组作为参数，当数组中的任意一个 Promise 首次变为 resolved 或 rejected 时，Promise.race() 返回的 Promise 实例就会结束。

这种方法主要用于检测最快完成的请求，但如果目的是等待所有请求完成，则不太适用。

示例代码

const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');

Promise.race([request1, request2, request3])
  .then(response => {
    // 最快完成的请求
    response.json().then(data => console.log('Fastest request data:', data));
  })
  .catch(error => {
    // 如果任何一个请求失败，则捕获错误
    console.error('An error occurred:', error);
  });

使用循环和递归

如果需要更灵活地控制请求的顺序或者在请求之间添加额外的逻辑，可以使用循环和递归来依次处理每个请求。

示例代码

const requests = [
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
  fetch('https://api.example.com/data3')
];

let results = [];

function processNextRequest(index) {
  if (index >= requests.length) {
    console.log('All requests completed:', results);
    return;
  }

  requests[index]
    .then(response => response.json())
    .then(data => {
      results.push(data);
      processNextRequest(index + 1);
    })
    .catch(error => {
      console.error('Error processing request:', error);
    });
}

processNextRequest(0);

使用 async/await

在现代浏览器中，可以使用 async/await 来编写更简洁的代码。结合 Promise.all() 或者循环和递归来处理多个请求。

示例代码

async function fetchAllData() {
  try {
    const [response1, response2, response3] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
      fetch('https://api.example.com/data3')
    ]);

    const [data1, data2, data3] = await Promise.all([
      response1.json(),
      response2.json(),
      response3.json()
    ]);

    console.log('All data:', data1, data2, data3);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

fetchAllData();

使用库和框架提供的工具

许多现代前端库和框架（如 Axios、React Query、VueUse 等）提供了更高级的功能来处理多个请求，例如自动重试、缓存、取消等。

示例代码 (使用 Axios)

import axios from 'axios';

async function fetchAllData() {
  try {
    const [data1, data2, data3] = await axios.all([
      axios.get('https://api.example.com/data1'),
      axios.get('https://api.example.com/data2'),
      axios.get('https://api.example.com/data3')
    ]);

    console.log('All data:', data1.data, data2.data, data3.data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

fetchAllData();