主页 / 问题 / 1132635
Accepted
Дмитрий Сорокин
Asked:2020-05-28 14:18:31 +0000 UTC2020-05-28 14:18:31 +0000 UTC

等待每个请求响应

  • 772

RxJS，Angular 9。任务：在循环中，您需要为每个项目 service.getData(item.param) 发出请求，等待响应，然后遍历数组。

例子：

array.forEach(item => {
   if (!item.mark) {
      ожидание this.service.getData(item.type) // запрос на сервер
   }
});
angular

1 个回答

  1. Best Answer

    这可以用 RxJS 来完成，但也可以用普通的 promise + 来完成async/await。

    我更喜欢第二种选择，更简洁+对所有团队成员都清楚：

    class SomeComponent {
  async iterateArrayAndMadeRequests() {
    const array = [
      {
        type: '1',
        mark: true,
      },
      {
        type: '2',
        mark: false,
      },
    ];

    for (const item of array.filter(item => !item.mark)) {
      // Я предполагаю, что `getData` возвращает
      // `return http.get(...)`
      await this.service.getData(item.type).toPromise();
    }
  }
}

    如果顺序不重要并且所有请求都可以并行：

    class SomeComponent {
  async iterateArrayAndMadeRequests() {
    const array = [
      {
        type: '1',
        mark: true,
      },
      {
        type: '2',
        mark: false,
      },
    ];

    await Promise.all(
      array
        .filter(item => !item.mark)
        .map(item => this.service.getData(item.type).toPromise())
    );
  }
}

    如果你需要 RxJS（但为什么？😁）：

    class SomeComponent {
  iterateArrayAndMadeRequests() {
    const array = [
      {
        type: '1',
        mark: true,
      },
      {
        type: '2',
        mark: false,
      },
    ];

    from(array.filter(item => !item.mark))
      .pipe(concatMap(item => this.service.getData(item.type)))
      .subscribe({
        complete: () => console.log('Все запросы были сделаны '),
      });
  }
}

    如果顺序不重要，则mergeMap代替concatMap.

    如果要将所有查询的结果作为数组获取：

    class SomeComponent {
  iterateArrayAndMadeRequests() {
    const array = [
      {
        type: '1',
        mark: true,
      },
      {
        type: '2',
        mark: false,
      },
    ];

    forkJoin(
      array.filter(item => !item.mark).map(item => this.service.getData(item.type)),
    ).subscribe({
      next: results => console.log(results),
    });
  }
}
    • 1

相关问题