js实现同时发多个请求
并发请求的实现方法
在JavaScript中实现同时发送多个请求，可以通过以下几种方式实现：
Promise.all
使用Promise.all可以并行执行多个异步请求，并在所有请求完成后统一处理结果。适用于需要等待所有请求完成后再进行后续操作的场景。
const urls = ['url1', 'url2', 'url3'];
const requests = urls.map(url => fetch(url));
Promise.all(requests)
.then(responses => Promise.all(responses.map(res => res.json())))
.then(data => console.log(data))
.catch(error => console.error(error));Promise.allSettled
与Promise.all类似，但不会因为某个请求失败而中断，会等待所有请求完成（无论成功或失败）。适用于需要处理部分失败请求的场景。
const urls = ['url1', 'url2', 'url3'];
const requests = urls.map(url => fetch(url));
Promise.allSettled(requests)
.then(results => {
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.error(result.reason);
}
});
});async/await结合循环
使用async/await语法结合循环可以更直观地处理并发请求。适用于需要按顺序处理结果的场景。
async function fetchAll(urls) {
const results = [];
for (const url of urls) {
try {
const response = await fetch(url);
results.push(await response.json());
} catch (error) {
console.error(`Failed to fetch ${url}:`, error);
}
}
return results;
}
fetchAll(['url1', 'url2', 'url3']).then(data => console.log(data));使用第三方库
某些第三方库（如axios）提供了更简洁的并发请求方式。适用于项目已使用该库的场景。
const axios = require('axios');
const urls = ['url1', 'url2', 'url3'];
axios.all(urls.map(url => axios.get(url)))
.then(axios.spread((...responses) => {
console.log(responses.map(res => res.data));
}))
.catch(error => console.error(error));注意事项
- 浏览器对并发请求数有限制（通常为6-8个），超出限制的请求会被排队。
- 大量并发请求可能导致服务器压力过大，需合理控制并发数量。
- 错误处理是并发请求中的重要环节，应确保每个请求都有适当的错误处理机制。
以上方法可根据具体需求选择使用，Promise.all和Promise.allSettled是最常用的原生解决方案。
