javascript - TypeScript:按顺序发送多个 HTTP 请求 Angular2

Question

我正在向 Web API 发送请求，并根据第一个 API 返回的返回值再次向同一 API 发送另一个请求。然后我尝试将 Web API 组件映射到一个类，但映射方法不会等待第二次调用返回。请帮助我在两次调用成功返回后如何进行映射？

下面是我的代码

getOrderDetail(orderId: string): Observable<OrderHeader> {

return this.svc.wCWebClientServiceGetOrderDetails({ _orderId: orderId })
  .do(order => {
    order.SalesLines.forEach(saleLine => {
      if (saleLine.RelatedOrders !== undefined && saleLine.RelatedOrders.length > 0) {
        saleLine.RelatedOrders.forEach(relatedOrder => {
          this.svc.wCWebClientServiceGetOrderDetails({ _orderId: relatedOrder.TransId })
            .subscribe(relOrder => {
              //debugger;
              relOrder.SalesLines.forEach(relLine => {
                order.SalesLines.push(relLine);
              });
            })
        });
      }
    })
  })
  //.do(order => console.log('Received order', order))
  .map(order => this.transformOrder(order));

}

Answer 1

您可以使用名为 MergeMap 的 RxJs 运算符(也称为 flatMap)来映射/迭代 Observable 值。

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  homeworld: Observable<{}>;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.homeworld = this.http.get('/api/people/1').pipe(
      mergeMap(character => this.http.get(character.homeworld))
    );
  }
}

因此，在我们的示例中，当我们获得家乡时，我们将在 Angular 色 Observable 流中返回一个 Observable。这会在 Observable 中创建一个嵌套的 Observable。 mergeMap 运算符通过订阅并从内部 Observable 中提取值并将其传递回父流来帮助我们。

有关更多信息，您可以查看此博客:Angular Multiple HTTP Requests with RxJS