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