当前位置:首页 > JavaScript

js怎么实现异步并行

2026-03-01 18:49:47JavaScript

异步并行实现方法

在JavaScript中实现异步并行操作通常涉及以下几种方法:

Promise.all()

使用Promise.all()可以并行执行多个Promise,并在所有Promise都完成时返回结果数组。若其中一个Promise被拒绝,整个Promise.all()会立即拒绝。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // 所有请求结果的数组
  })
  .catch(error => {
    console.error(error); // 任一请求失败时的错误
  });

Promise.allSettled()

Promise.all()不同,Promise.allSettled()会等待所有Promise完成(无论成功或失败),并返回每个Promise的状态和结果。

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.error(result.reason);
      }
    });
  });

async/await结合Promise.all()

async函数中,可以使用await Promise.all()实现并行异步操作。

async function fetchAllData() {
  try {
    const [data1, data2, data3] = await Promise.all([promise1, promise2, promise3]);
    console.log(data1, data2, data3);
  } catch (error) {
    console.error(error);
  }
}

并行循环处理

对于需要并行处理数组中的每个元素的情况,可以结合map()Promise.all()

const urls = ['url1', 'url2', 'url3'];
const fetchPromises = urls.map(url => fetch(url));

Promise.all(fetchPromises)
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => console.log(data));

限制并发数

在某些场景下需要限制并发数,可以使用第三方库(如p-limit)或自定义实现。

const limit = require('p-limit');
const concurrencyLimit = limit(2); // 限制并发数为2

const tasks = [
  concurrencyLimit(() => fetch('url1')),
  concurrencyLimit(() => fetch('url2')),
  concurrencyLimit(() => fetch('url3'))
];

Promise.all(tasks)
  .then(results => console.log(results));

注意事项

  • 并行操作会同时发起多个请求或任务,需注意资源消耗和速率限制。
  • 在Node.js中,文件I/O或CPU密集型任务可以使用worker_threads实现真正的并行。
  • 浏览器环境中,大量并行请求可能会触发HTTP/2的多路复用限制。

js怎么实现异步并行

标签: js
分享给朋友:

相关文章

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。…