当前位置：首页 > news >正文

js 实现 ajax 并发请求

news 2025/8/13 11:02:32

Promise.all 并发请求（全部完成后处理）

// 使用 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

Promise.allSettled（不管成败都处理）

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);}});
});

特点：

不会因为某个失败而中断
每个请求的状态都会返回

限制并发数（比如同时只能跑 2 个）

// 并发控制工具
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));