Angular: Nested HTTP calls - Make code more readable

Question

Let us assume that I want to fetch data in my Angular application by calling a REST API in order to display it in the Angular application.

I would call something like this:

this.http.get(this.configUrl).subscribe(response => {
  //do something
});

However, I often have the case that I have to fetch further data based on the first REST API call.So I have something that looks like this:

  this.http.get(this.configUrl).subscribe(response => {
      //next call
      this.http.get(this.configUrl).subscribe(response => {
        //next call
        this.http.get(this.configUrl).subscribe(response => {
          //next call
          this.http.get(this.configUrl).subscribe(response => {
           //do something
           });
         });
      });
    });

I find this very difficult to read. Is there a way to make this more readable in Angular / Typescript or am I doing something fundamentally wrong?

Try to use RxJS operators, mergeMap, forkJoin. There are lot of RxJS operators and observables that you can use in this scenario. — Programmer, May 17 '21 at 09:12
Possible duplicate: https://stackoverflow.com/q/63685936/6513921 — ruth, May 17 '21 at 09:13
Are all these calls going to the same endpoint? Do you have access to the API too? — Darren Street, May 17 '21 at 09:25

score 2 · Answer 1 · answered May 17 '21 at 09:34

You could use RxJS operators such as switchMap and pipe to streamline this nested call;

    this.http.get(this.configUrl)
      .pipe(map(
        res => res.json()),
        switchMap(data => {
          const data1 = data.sample_datum;
          return this.http.get(this.configUrl + "&data=" + data1);
        }),
        switchMap(data => {
          const data2 = data.sample_datum2;
          return this.http.get(this.configUrl + "&data=" + data2);
        }),
        switchMap(data => {
          const data3 = data.sample_datum3;
          return this.http.get(this.configUrl + "&data=" + data3);
        }),
        switchMap(data => {
          const data4 = data.sample_datum4;
          return this.http.get(this.configUrl + "&data=" + data4);
        }))
      .subscribe((d) => console.log("subscribe", d))

or ou can use the await keyword to prevent nesting.

    const data1 = await this.http.get(this.configUrl);
    const data2 = await this.http.get(this.configUrl + "&data=" + data1);
    const data3 = await this.http.get(this.configUrl + "&data=" + data2);
    const data4 = await this.http.get(this.configUrl + "&data=" + data3);

Angular: Nested HTTP calls - Make code more readable

1 Answers1