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

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

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

使用 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();