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

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

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

使用 Promise.all()

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

示例代码

javascript 复制代码
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 的结果的对象数组。

示例代码

javascript 复制代码
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 实例就会结束。

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

示例代码

javascript 复制代码
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);
  });

使用循环和递归

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

示例代码

javascript 复制代码
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() 或者循环和递归来处理多个请求。

示例代码

javascript 复制代码
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)

javascript 复制代码
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();
相关推荐
木叶丸4 分钟前
编程开发中,那些你必须掌握的基本概念
前端·数据结构·编程语言
前端进阶者5 分钟前
js通知提醒
前端·javascript
拖孩10 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
快起来别睡了18 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵27 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai27 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风28 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾28 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿30 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸30 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端