Angular 6嵌套HTTP調用嵌套調用永不執行

Question

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

Answer 1

不建議使用上述語法嵌套HTTP調用。 相反，有特定的RxJS運算符（類似於map）專門用於串行執行HTTP調用。

評論者推薦的switchMap是那些運算符之一。 這是一個例子：

Angular4-嵌套的Http調用

以下是一些可能有用的文章：

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

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