如何使用 Angular 限制并发 http 请求的数量？

Question

假设我要上传 100 张图像，因此我的 Angular 前端必须进行 100 个 API 调用。然而，由于后端限制，我希望在任何给定时间点最多同时有 5 个 API 请求。每当队列中的一个 http 请求完成时，就应该添加并执行另一个请求。

我怎样才能实现这个目标？

Answer 1

第二个参数mergeMap对应API并发调用的最大数量。将此参数设置为 5 意味着在任何给定时间，只会执行 5 个 API 请求，并且一旦一个请求完成，就会发起另一个请求。

检查我的Stackblitz 示例或查看下面的代码：

import { mergeMap, of } from 'rxjs';

// Set max. number of simultaneous requests:
const numberOfSimultaneousRequests = 5;

// Add 50 observables that will execute the API-requests:
const allApiCalls = Array.from({ length: 50 }, (_, i) => this.makeApiCall(i));

of(...allApiCalls)
  .pipe(mergeMap((apiCall) => apiCall, numberOfSimultaneousRequests))
  .subscribe((response) => {
    console.log(response);
  });
}

mockApiCall(value: number): Observable<number> {
  return of(value).pipe(delay(1000));
}