js 实现 ajax 并发请求

  1. Promise.all 并发请求(全部完成后处理)
javascript 复制代码
// 使用 fetch 作为示例
function getData(url) {
  return fetch(url).then(res => res.json());
}

Promise.all([
  getData('/api/user'),
  getData('/api/order'),
  getData('/api/cart')
])
.then(([user, order, cart]) => {
  console.log('用户数据:', user);
  console.log('订单数据:', order);
  console.log('购物车数据:', cart);
})
.catch(err => {
  console.error('其中一个请求失败:', err);
});

特点:

  • 所有请求是同时发出的
  • 只有全部成功才进入 .then,有一个失败就进入 .catch
  1. Promise.allSettled(不管成败都处理)
javascript 复制代码
Promise.allSettled([
  fetch('/api/user').then(res => res.json()),
  fetch('/api/order').then(res => res.json()),
  fetch('/api/cart').then(res => res.json())
])
.then(results => {
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`第${index+1}个成功:`, result.value);
    } else {
      console.error(`第${index+1}个失败:`, result.reason);
    }
  });
});

特点:

  • 不会因为某个失败而中断
  • 每个请求的状态都会返回
  1. 限制并发数(比如同时只能跑 2 个)
javascript 复制代码
// 并发控制工具
async function limitConcurrency(urls, limit) {
  const results = [];
  const queue = [...urls];

  async function worker() {
    while (queue.length) {
      const url = queue.shift();
      try {
        const res = await fetch(url).then(r => r.json());
        results.push(res);
      } catch (err) {
        results.push(err);
      }
    }
  }

  const workers = Array.from({ length: limit }, worker);
  await Promise.all(workers);
  return results;
}

// 用法
limitConcurrency(['/api/1', '/api/2', '/api/3', '/api/4'], 2)
  .then(res => console.log('结果:', res));

特点:

  • 适合需要防止高并发压垮服务器的场景
  • 一批批并发执行
相关推荐
大飞pkz7 小时前
【设计模式】六大基本原则
开发语言·设计模式·c#·六大原则
iCxhust8 小时前
Intel8259汇编串口接收转C语言
c语言·开发语言·汇编
大白的编程日记.8 小时前
【Linux学习笔记】线程概念和控制(二)
linux·笔记·学习
掘根8 小时前
【Qt】布局管理器
开发语言·qt
半夏知半秋9 小时前
skynet-socket.lua源码分析
服务器·开发语言·学习·架构·lua
Winson℡9 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh9 小时前
less和sass
前端·less·sass
克里斯蒂亚诺更新9 小时前
OpenSSL 3.0对某些加密算法增加了限制
笔记
西猫雷婶9 小时前
random.shuffle()函数随机打乱数据
开发语言·pytorch·python·学习·算法·线性回归·numpy
随机惯性粒子群9 小时前
STM32控制开发学习笔记【基于STM32 HAL库】
笔记·stm32·嵌入式硬件·学习