角6嵌套HTTP调用嵌套调用永不执行

Question

在角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
        })
      }));
    }
  }
}

Answer 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/