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

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

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

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

1.1. 使用 Promise.all()

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

1.1.1. 示例代码

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);});

1.2. 使用 Promise.allSettled()

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

1.2.1. 示例代码

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);}
    });});

1.3. 使用 Promise.race()

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

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

1.3.1. 示例代码

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);});

1.4. 使用循环和递归

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

1.4.1. 示例代码

const requests=[fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2'),fetch('https://api.example.com/data3')];let results=[];functionprocessNextRequest(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);

1.5. 使用 async/await

在现代浏览器中，可以使用 async/await 来编写更简洁的代码。

结合 Promise.all() 或者循环和递归来处理多个请求。

1.5.1. 示例代码

asyncfunctionfetchAllData(){
  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();

1.6. 使用库和框架提供的工具

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

1.6.1. 示例代码 (使用 Axios)

importaxiosfrom'axios';asyncfunctionfetchAllData(){
  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();

这些方法可以帮助你有效地管理多个异步请求，并在所有请求完成后再进行后续操作。选择哪种方法取决于你的具体需求和偏好。