Angular 6 Nested HTTP Calls Nested Call Never Executes

Question

Working in Angular 6 I have two HTTP calls that need to execute in series. The first call succeeds and the second call indicates success but never actually makes an HTTP request.

If I break up the two calls and execute them individually they both work. However, when combining them in series the second call never works.

The general idea here is to request a signed URL from the server and upon receipt upload a file to the specified 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
        })
      }));
    }
  }
}

Stop using any, and the compiler will tell you what the problem is. Replace map by switchMap. — JB Nizet
– JB Nizet, Commented Nov 2, 2018 at 23:23

DeborahK · Accepted Answer · 2018-11-02 23:41:06Z

1

Nesting HTTP calls using the syntax shown above is not recommended practice. Rather, there are specific RxJS operators (similar to map) that are specifically for executing HTTP calls in series.

The switchMap recommended by the commenter is one of those operators. Here is an example:

Angular4 - Nested Http Calls

Here are some articles that may be helpful:

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

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

edited Nov 2, 2018 at 23:41

answered Nov 2, 2018 at 23:32

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6 Nested HTTP Calls Nested Call Never Executes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related