当前位置：首页 > JavaScript

js如何实现并发请求

2026-01-31 01:29:05JavaScript

实现并发请求的方法

在JavaScript中，可以通过多种方式实现并发请求，主要利用异步编程的特性。以下是几种常见的方法：

使用Promise.all

Promise.all 可以并行执行多个异步操作，并在所有操作完成后返回结果数组。适用于需要等待所有请求完成后再处理的场景。

const fetchData1 = fetch('https://api.example.com/data1');
const fetchData2 = fetch('https://api.example.com/data2');

Promise.all([fetchData1, fetchData2])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    console.log(data[0]); // 第一个请求的结果
    console.log(data[1]); // 第二个请求的结果
  })
  .catch(error => console.error('Error:', error));

使用Promise.allSettled

Promise.allSettled 类似于 Promise.all，但不会因为某个请求失败而中断，而是会返回所有请求的状态（成功或失败）。

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

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.error(result.reason);
      }
    });
  });

使用async/await

结合 async/await 可以更清晰地处理并发请求，代码更易读。

async function fetchConcurrently() {
  try {
    const [response1, response2] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2')
    ]);
    const data1 = await response1.json();
    const data2 = await response2.json();
    console.log(data1, data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchConcurrently();

使用第三方库（如Axios）

Axios 提供了更简洁的API来处理并发请求。

const axios = require('axios');

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
  .then(axios.spread((response1, response2) => {
    console.log(response1.data, response2.data);
  }))
  .catch(error => console.error('Error:', error));

使用Web Workers

对于CPU密集型任务，可以通过Web Workers实现真正的并行处理。Web Workers运行在独立的线程中，不会阻塞主线程。

js如何实现并发请求

// main.js
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');

worker1.onmessage = event => console.log('Worker1:', event.data);
worker2.onmessage = event => console.log('Worker2:', event.data);

worker1.postMessage('start');
worker2.postMessage('start');

// worker1.js
self.onmessage = function(event) {
  fetch('https://api.example.com/data1')
    .then(response => response.json())
    .then(data => self.postMessage(data));
};