fetch并发请求,控制请求有序执行
时间: 2024-08-13 09:03:45 浏览: 63
在JavaScript中,fetch API允许并发发送多个HTTP请求,这提高了效率,因为浏览器可以在等待响应的同时处理其他请求。然而,为了保证请求的顺序执行,特别是对于那些依赖于前一请求结果的后续请求,通常需要采用一些策略:
1. **Promise.all() 和 Promise.race()**:可以结合这两个函数,先发送所有请求,然后等待所有请求完成后再依次执行依赖的回调。如果有一个请求失败,`Promise.all()`会立即拒绝。
```javascript
const promises = [
fetch(url1),
fetch(url2),
fetch(url3)
];
Promise.all(promises)
.then(responses => {
// 所有请求成功,按序解析结果
})
.catch(error => {
// 某个请求出错,全局错误处理
});
```
2. **自定义序列化函数**:创建一个数组存储请求,并使用递归来遍历这个数组。在每次调用fetch之前检查队列是否为空,如果为空则执行下一个请求,否则等待当前请求完成。
```javascript
function sendInOrder(urls) {
return urls.length ? (url => new Promise(resolve => {
fetch(url)
.then(response => {
resolve();
// 下一步请求
sendInOrder(urls.slice(1)).then(() => { /* 成功后的清理操作 */ });
})
.catch(err => { /* 错误处理 */ });
}))(urls.shift()) : Promise.resolve();
}
sendInOrder([url1, url2, url3]);
```