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调用。而是有专门用于顺序执行HTTP调用的特定RxJS运算符（类似于map）。

评论者推荐的switchMap是那些运算符之一。这是一个示例：

Angular4 - Nested Http Calls

以下一些文章可能会有所帮助：

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

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

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

1 个答案: