"Launching" conduit for Observable

Question

"Launching" conduit for Observable

Is there a way to attach two pipes to an HttpClient request in order to execute functions at the beginning and end of the request? I have discovered the "finalize" operator for executing a function when the request is finished, but I am looking for an equivalent for the start of the request. Here's what my code looks like:

this.http.get<MyModel>('api/model')
    .pipe(
      // TODO missing something for startup
      finalize(() => console.log('on start'))
    )
    .subscribe(result => {
      console.log(result);
    });

How can I achieve this desired outcome? Are there any built-in operators in RxJS that could help with this, or will I need to create my own solution? Any alternative suggestions?

angular typescript rxjs

Answer 1

Answer №1

UPDATE: I have discovered a more obscure solution that works well. There exists a defer Observable creation function, which is not commonly recognized as an operator.

This method can be implemented in the following manner:

defer(() => {
    console.log('initializing');
    return this.http.get<MyModel>('api/model').pipe(
        finalize(() => console.log('finalizing'))
    )
}).subscribe(response => {
    console.log(response);
});

An advantage of this approach is that it encapsulates the HttpClient within a closure, allowing you to share and use the Observable without immediately subscribing to it.

startWith is a similar operator available for use, although it requires matching the type of the HTTP response.

Answer 2

UPDATE: I have discovered a more obscure solution that works well. There exists a defer Observable creation function, which is not commonly recognized as an operator.

This method can be implemented in the following manner:

defer(() => {
    console.log('initializing');
    return this.http.get<MyModel>('api/model').pipe(
        finalize(() => console.log('finalizing'))
    )
}).subscribe(response => {
    console.log(response);
});

An advantage of this approach is that it encapsulates the HttpClient within a closure, allowing you to share and use the Observable without immediately subscribing to it.

startWith is a similar operator available for use, although it requires matching the type of the HTTP response.

Answer 3

Answer №2

Following @Tomasz Błachut's suggestion using the startWith operator, I managed to implement a solution that meets my requirements. It involves some clever tricks but functions as intended.

The approach is to utilize the startWith operator along with an immediately invoked function that carries out the necessary actions and returns null. By then applying skip(1), we are able to bypass this null value in our subscription.

The end result works flawlessly. Here is the updated code:

this.http.get<MyModel>('api/model')
    .pipe(
      startWith((() => {
        console.log('on start');
        return null;
      })()),
      skip(1),
      finalize(() => console.log('on end'))
    )
    .subscribe(result => {
      console.log(result);
    });

Answer 4

Following @Tomasz Błachut's suggestion using the startWith operator, I managed to implement a solution that meets my requirements. It involves some clever tricks but functions as intended.

The approach is to utilize the startWith operator along with an immediately invoked function that carries out the necessary actions and returns null. By then applying skip(1), we are able to bypass this null value in our subscription.

The end result works flawlessly. Here is the updated code:

this.http.get<MyModel>('api/model')
    .pipe(
      startWith((() => {
        console.log('on start');
        return null;
      })()),
      skip(1),
      finalize(() => console.log('on end'))
    )
    .subscribe(result => {
      console.log(result);
    });

"Launching" conduit for Observable

Answer №1

Answer №2

Similar questions

Set the datepicker with the window positioned to the right side

A conditional type used with an array to return either an Error object or a generic type when the array is destructured

Having Trouble with Angular2: Nesting a Child Component?

Compelling users to upgrade to the latest version of the Angular 5 application

Clear drop down selections after button is pressed

Error Arises When Making Selection in PrimeNG's P-ListBox Component

Disabling ion-select in Ionic 2 with Typescript

Having trouble iterating over an array in Angular's TypeScript

Enhancing native JavaScript types in TypeScript 1.8 with the power of global augmentation

A guide to confirm if an object includes an HTML element without compromising safety

Toggle the enableCheckboxSelector based on a specific condition

Obtain a 404 error status code when the route cannot be found in Angular 6+ using Universal

What are the steps for launching an Angular application?

Animating with Angular 2

Although Angular allows for CSS to be added in DevTools, it seems to be ineffective when included directly in

Issue with absolute import in React TypeScript application

Universal function for selecting object properties

Angular application featuring scrolling buttons

Ways to verify the existence and non-empty status of a directory?

Nest is unable to resolve the dependencies of the ItemsService. Ensure that the required argument at index [0] is present within the AppModule context