js实现同时发多个请求

使用Promise.all实现并发请求

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 => {
    // 所有请求都已完成
    return Promise.all(responses.map(res => res.json()));
  })
  .then(data => {
    console.log(data[0]); // 第一个请求的结果
    console.log(data[1]); // 第二个请求的结果
    console.log(data[2]); // 第三个请求的结果
  })
  .catch(error => {
    console.error('有一个请求失败:', error);
  });

使用async/await语法简化代码

async/await语法可以让并发请求的代码更加清晰易读，同时保持Promise.all的并发特性。

async function fetchMultipleUrls() {
  try {
    const urls = [
      'https://api.example.com/data1',
      'https://api.example.com/data2',
      'https://api.example.com/data3'
    ];

    const requests = urls.map(url => fetch(url));
    const responses = await Promise.all(requests);
    const data = await Promise.all(responses.map(res => res.json()));

    data.forEach(result => console.log(result));
  } catch (error) {
    console.error('请求出错:', error);
  }
}

fetchMultipleUrls();

限制并发数量的实现

当需要控制同时发起的请求数量时，可以使用自定义的并发控制函数。这种方法适合在请求资源有限或需要防止服务器过载的场景。

async function limitedConcurrentRequests(urls, maxConcurrent) {
  const results = [];
  const executing = new Set();

  for (const url of urls) {
    const request = fetch(url).then(res => res.json());

    results.push(request);
    executing.add(request);
    request.then(() => executing.delete(request));

    if (executing.size >= maxConcurrent) {
      await Promise.race(executing);
    }
  }

  return Promise.all(results);
}

// 使用示例
const urls = Array(10).fill().map((_, i) => `https://api.example.com/data${i+1}`);
limitedConcurrentRequests(urls, 3)
  .then(data => console.log(data))
  .catch(err => console.error(err));

使用Axios库实现并发请求

Axios提供了更简洁的API来处理HTTP请求，其并发请求的实现方式与fetch类似但更简洁。

const axios = require('axios');

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

Promise.all(requests)
  .then(responses => {
    responses.forEach(response => {
      console.log(response.data);
    });
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

处理部分请求失败的情况

Promise.allSettled方法可以在部分请求失败时仍然获取其他请求的结果，而不是立即抛出错误。

const requests = [
  fetch('https://api.example.com/good1'),
  fetch('https://api.example.com/bad-request'),
  fetch('https://api.example.com/good2')
];

Promise.allSettled(requests)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`请求${index+1}成功:`, result.value);
      } else {
        console.log(`请求${index+1}失败:`, result.reason);
      }
    });
  });