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));async/await语法 结合async/await可以更清晰地处理并发请求的异步逻辑。
async function fetchAll(urls) {
try {
const responses = await Promise.all(urls.map(url => fetch(url)));
const data = await Promise.all(responses.map(res => res.json()));
console.log(data);
} catch (error) {
console.error(error);
}
}Axios库 使用Axios库可以简化HTTP请求的处理过程。
import axios from 'axios';
const requests = [
axios.get('url1'),
axios.get('url2'),
axios.get('url3')
];
Promise.all(requests)
.then(responses => console.log(responses.map(res => res.data)))
.catch(error => console.error(error));并发控制
当需要限制并发数量时，可以使用专门库如p-limit。
import pLimit from 'p-limit';
const limit = pLimit(2); // 最大并发数
const urls = ['url1', 'url2', 'url3', 'url4'];
const run = async () => {
const results = await Promise.all(
urls.map(url => limit(() => fetch(url)))
);
console.log(results);
};
run();注意事项
- 浏览器对同一域名下的请求存在并发限制（通常6个）
- 大量并发请求可能导致服务器压力过大
- 错误处理需要考虑单个请求失败不影响其他请求的场景
这些方法可以根据具体需求选择使用，Promise.all适合简单并发场景，而并发控制库适合需要限制请求数量的情况。
