如何处理角度上的多个帖子请求？ [复制]

Question

我正在使用 Angular 12 和 NestJS，我需要在同步过程中插入大约 3000 个项目，我从外部 API 获取这些项目并在我的应用程序的数据库中注册或更新它们。当我尝试提交请求时，我遇到了很多问题，例如内存使用率高、浏览器死机，并且我在 Chrome 中收到 ERR_INSUFFICIENT_RESOURCES 错误，并且只输入了几项。

我的组件：

this.items.forEach((item) => {
  this.itemService.insert(item).subscribe((res) => {
     console.log(res);
  })
})

我的服务：

insert(item: Item): Observable<Item> {
return this.http.post<Item>(`${APIURL}/item`);
}

我尝试使用 forkJoin，但遇到了同样的问题。我的目标是在不崩溃的情况下插入或更新项目，并尽可能跟踪进度，例如“500 out of 3000 synchronized...”

Answer 1

根本原因来自 Javascript 异步，这意味着您几乎同时推送 3000 个项目，然后 Chrome 会抛出此错误。

为了解决这个问题，我们应该通过以下解决方案减少请求的数量：

• 解决方案 1：减少号码请求的时间。
• 解决方案 2：优化能够同时更新多个项目的 API（例如在 Mongodb 中使用 Bulk Write 写入数据：https://docs.mongodb.com/manual/core/bulk-write-operations/）

为了简单起见，我使用了解决方案 1，它的效率不如解决方案 2，但它更简单。

解决方案 1：在 RxJs 中使用 concatMap 来等待每个请求完成，如下例所示

import { from, of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

const items = [1, 2, 3, 4, 5];

from(items)
  .pipe(concatMap(item => of(item).pipe(delay(1000))))
  .subscribe(console.log);

然后您可以将of(item).pipe(delay(1000))) 替换为您的instert(item) 发布请求。

现场演示：https://stackblitz.com/edit/typescript-uamv8w?file=index.ts