Angular 6 嵌套 HTTP 调用嵌套调用从不执行答案

【问题标题】：Angular 6 Nested HTTP Calls Nested Call Never ExecutesAngular 6 嵌套 HTTP 调用嵌套调用从不执行
【发布时间】：2018-11-02 23:19:32
【问题描述】：

在 Angular 6 中工作我有两个 HTTP 调用需要串联执行。第一次调用成功，第二次调用表示成功，但从未真正发出 HTTP 请求。

如果我分解这两个调用并单独执行它们，它们都可以工作。但是，当将它们串联组合时，第二个调用永远不会起作用。

这里的一般想法是从服务器请求一个签名的 URL，并在收到后将文件上传到指定的 URL。

export class StaticAssetService {
  constructor(private httpClient: HttpClient) { }

  public uploadAsset(assetType: StaticAssetType, file: File): Observable<any> {
    if (file) {
      return this.httpClient.get(`${environment.apiURI}/secure/file-upload/getPresignedURLForUpload.json`, {
        params: {
          assetType: assetType,
          originalFileName: file.name
        }
      }).pipe(map(response => {
        return this.httpClient.put(response.signedURL, file, {
          headers: new HttpHeaders({'Content-Type': file.type}),
          reportProgress: true
        })
      }));
    }
  }
}

【问题讨论】：

停止使用any，编译器会告诉你问题出在哪里。用 switchMap 替换地图。

标签： angular http nested rxjs angular6

【解决方案1】：

不推荐使用上述语法嵌套 HTTP 调用。相反，有特定的 RxJS 操作符（类似于 map）专门用于串行执行 HTTP 调用。

评论者推荐的 switchMap 就是其中之一。这是一个例子：

Angular4 - Nested Http Calls

这里有一些文章可能会有所帮助：

https://medium.com/@juliapassynkova/switchmap-in-details-b98d34145311

https://blog.angular-university.io/rxjs-higher-order-mapping/

【讨论】：