Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

Question

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

I'm currently grappling with understanding Angular (2+), the HttpClient, and Observables. I'm familiar with promises and async/await, and I'm trying to achieve a similar functionality in Angular.

//(...) Here's some example code showcasing how to handle promises and async/await
  async function getDataFromRemoteServer() {
    this.result = await httpGet(`/api/point/id`);
    this.dependentKey = someComplexSyncTransformation(this.result);
    this.dependentResult = await httpGet(`/api/point/id/dependent/keys/${this.dependentKey}`);
    this.deeplyNestedResult = await httpGet(`/api/point/id/dependen/keys/${this.dependentResult.someValue}`);
  }

The approach I've come up with in Angular looks like this:

import { HttpClient } from `@angular/common/http`;

//(...) Set up component boilerplate.

  constructor(private http: HttpClient) {}

// somewhere in a component.

  getDataFromRemoteServer() {
    this.http.get(`/api/point/id`).subscribe(result => {
       this.result = result;
       this.dependentKey = someComplexSyncTransformation(this.result);
       this.http.get(`/api/point/id/dependent/keys/${this.dependentKey}`).subscribe(dependentResult => {
         this.dependentResult = dependentResult;
         this.http.get(`/api/point/id/dependen/keys/${this.dependentResult.someValue}`).subscribe(deeplyNestedResult => {
            this.deeplyNestedResult = deeplyNestedResult;
         });
       })
    });
  }

//...

It seems like I'm falling into the Pyramid of Doom pattern with this implementation, which I'd like to avoid. How can I refactor this Angular snippet to prevent that?

Thanks!

P.S: I know about using .toPromise on the result of the .get call, but for now, I want to stick with Observables.

javascript angular typescript promise observable

Answer 1

Answer №1

When dealing with observables, the subscribe method is not frequently called. Instead, operators are used to combine observables and create a sequence of operations.

The fundamental operator for transforming the output of one observable into another is map. This is akin to how mapping an array can produce a new array. For example, let's double all values in an observable:

const myObservable = of(1, 2, 3).pipe(
  map(val => val * 2)
);
// The observable myObservable will emit 2, 4, 6

Mapping is also essential when transitioning from one http request observable to another. However, there is an additional step required as shown below:

const myObservable = http.get('someUrl').pipe(
  map(result => http.get('someOtherUrl?id=' + result.id)
)

The issue with this code is that it generates an observable that emits other observables, creating a 2-dimensional observable-like structure. To address this, we need to flatten it so that the observable outputs results of the second http.get call. Various methods exist for flattening based on the desired order of results if multiple observables emit multiple values:

mergeMap allows all observables to run in any order and outputs values as they arrive without canceling old ones.
switchMap switches to the latest observable, eliminating race conditions by canceling old ones.
concatMap completes the first observable before moving to the next, avoiding race conditions but not canceling old work.

In this scenario, switchMap is recommended. So, the previous code snippet is modified as:

const myObservable = http.get('someUrl').pipe(
  switchMap(result => http.get('someOtherUrl?id=' + result.id)
)

Now, let's apply these concepts to your code. The following example illustrates using tools without storing intermediate values like this.result or this.dependentKey:

getDataFromRemoteServer() {
  return this.http.get(`/api/point/id`).pipe(
    map(result => someComplexSyncTransformation(result)),
    switchMap(dependentKey => this.http.get(`/api/point/id/dependent/keys/${dependentKey}`)),
    switchMap(dependantResult => this.http.get(`/api/point/id/dependent/keys/${dependentResult.someValue}`)
  );
}

// Using it:

getDataFromRemoteServer()
 .subscribe(deeplyNestedResult => {
   // Handle deeplyNestedResult
 });

If saving values is crucial, utilizing the tap operator to indicate side effects is recommended. Tap runs specified code on each value emitted without altering the value:

getDataFromRemoteServer() {
  return this.http.get(`/api/point/id`).pipe(
    tap(result => this.result = result),
    map(result => someComplexSyncTransformation(result)),
    tap(dependentKey => this.dependentKey = dependentKey),
    // ... etc
  );
}

Answer 2

When dealing with observables, the subscribe method is not frequently called. Instead, operators are used to combine observables and create a sequence of operations.

The fundamental operator for transforming the output of one observable into another is map. This is akin to how mapping an array can produce a new array. For example, let's double all values in an observable:

const myObservable = of(1, 2, 3).pipe(
  map(val => val * 2)
);
// The observable myObservable will emit 2, 4, 6

Mapping is also essential when transitioning from one http request observable to another. However, there is an additional step required as shown below:

const myObservable = http.get('someUrl').pipe(
  map(result => http.get('someOtherUrl?id=' + result.id)
)

The issue with this code is that it generates an observable that emits other observables, creating a 2-dimensional observable-like structure. To address this, we need to flatten it so that the observable outputs results of the second http.get call. Various methods exist for flattening based on the desired order of results if multiple observables emit multiple values:

mergeMap allows all observables to run in any order and outputs values as they arrive without canceling old ones.
switchMap switches to the latest observable, eliminating race conditions by canceling old ones.
concatMap completes the first observable before moving to the next, avoiding race conditions but not canceling old work.

In this scenario, switchMap is recommended. So, the previous code snippet is modified as:

const myObservable = http.get('someUrl').pipe(
  switchMap(result => http.get('someOtherUrl?id=' + result.id)
)

Now, let's apply these concepts to your code. The following example illustrates using tools without storing intermediate values like this.result or this.dependentKey:

getDataFromRemoteServer() {
  return this.http.get(`/api/point/id`).pipe(
    map(result => someComplexSyncTransformation(result)),
    switchMap(dependentKey => this.http.get(`/api/point/id/dependent/keys/${dependentKey}`)),
    switchMap(dependantResult => this.http.get(`/api/point/id/dependent/keys/${dependentResult.someValue}`)
  );
}

// Using it:

getDataFromRemoteServer()
 .subscribe(deeplyNestedResult => {
   // Handle deeplyNestedResult
 });

If saving values is crucial, utilizing the tap operator to indicate side effects is recommended. Tap runs specified code on each value emitted without altering the value:

getDataFromRemoteServer() {
  return this.http.get(`/api/point/id`).pipe(
    tap(result => this.result = result),
    map(result => someComplexSyncTransformation(result)),
    tap(dependentKey => this.dependentKey = dependentKey),
    // ... etc
  );
}

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

Answer №1

Similar questions

Guide to implementing Apollo GraphQL subscriptions in NextJS on the client-side

Encountering a Bad Request Response When Trying to Access WCF Service via Jquery Ajax

An effective way to prevent right-clicking on iframes across all websites

Limiting Firebase communication to Electron Application

There appears to be a syntax error in the Values section of the .env file when using nodejs

Integrate a post AJAX call into an Angular service for seamless functionality

No control access origin header found on the request to Spring 5 WebFlux functional endpoints

Interactive calendar feature with a popup that appears when hovering over an event

"Modify the color of a div element by changing it from the color name to the hexadecimal

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

Leveraging the power of JavaScript and jQuery to identify comparable SELECT choices

What is the best way to incorporate or reference an existing AngularJS project in a new project?

What causes the template to refresh when the input remains unchanged while employing the OnPush strategy?

Ways to extract JSON data from multiple JSON arrays

Troubleshooting: jQuery toggle() issue in Firefox 3.0.12

Guide to resolving the error "Type 'void' cannot be assigned to type 'Function' in VueJS"

Challenge with Sequelize Many-to-Many Query

Pictures squeezed between the paragraphs - Text takes center stage while images stand side by side

Visuals and PDF Generation Tool

Has the rotation of the model been altered?