list.map 如何等待请求响应？

Question

我有一张地图，里面有请求，但我检测到地图没有等待请求响应来获取下一个索引。

this.products = [];
productList.map((product) => {
this.productService.getProductInfo(product).subscribe(productData => {
   productData.selected = true;
   this.products.push(productData);
  });
});

有没有办法让地图等待请求响应？

Answer 1

拳头我会提出一系列要求：

const productRequests: Observable<Product>[] = productList.map(productId => this.productService.getProductInfo(productId));

然后接下来结合可观察对象，你做多种方式，我认为保持顺序很重要

// loads all at once, preserves order
forkJoin(...productRequests).subscribe(productData => {
  this.products = productData;
});

或

// loads one by one, sort post result to preserve order
this.products = [];
merge(...productRequests).subscribe(productData => {
  this.products.push(productData);
  this.products.sort((a, b) => {
    if (a.id < b.id) {
      return -1
    }
    if (a.id > b.id) {
      return 1
    }
    return 0;
  });
});

https://stackblitz.com/edit/angular-map-request

list.map 如何等待请求响应？

How do list.map wait request response?

typescript

angular

angular5