The art of linking Observables on the fly in rxjs and angular

Question

The art of linking Observables on the fly in rxjs and angular

In my current project, I am facing a challenge where multiple events can be triggered from an object. These events are handled by a component and then sent to a REST API. The issue arises when I need to ensure that calls to the REST API for a specific resource are made in sequence. For example, I have the following methods:

someObjectCreated(objectCreated){
    this.http.post(...);
}

someObjectNameChanged(objectNameChanged){
    this.http.post(...);
}

someObjectDeleted(objectDeleted){
    this.http.delete(...);
}

These event handler methods can be executed at any time. Consider a scenario where someObjectCreated is called, followed immediately by someObjectNameChanged before the POST of someObjectCreated has even completed.

I am wondering if there is a way to chain the outcomes of these observables. Would it be more efficient to convert them to promises and chain them using .then()? Are there any common design patterns in Angular that can help solve this problem?

angular typescript rxjs angular2-observables

Answer 1

Answer №1

If you want to implement a chain of operations using the Observable.flatMap operator, follow this example:

this.service.someObjectCreated(object)
    .flatMap(objectChanged => this.service.updateObjectName(objectChanged))
    .flatMap(result => this.service.deleteObject(result))
    .subscribe(finalResult => {
          console.log(finalResult);
     });

Answer 2

If you want to implement a chain of operations using the Observable.flatMap operator, follow this example:

this.service.someObjectCreated(object)
    .flatMap(objectChanged => this.service.updateObjectName(objectChanged))
    .flatMap(result => this.service.deleteObject(result))
    .subscribe(finalResult => {
          console.log(finalResult);
     });

Answer 3

Answer №2

In my opinion, it is important to add a loader before sending any request and remove it after completion. Additionally, make sure to update your object based on the response received. If you send a second request with the same object before receiving the first response, you risk losing the original data.

Answer 4

In my opinion, it is important to add a loader before sending any request and remove it after completion. Additionally, make sure to update your object based on the response received. If you send a second request with the same object before receiving the first response, you risk losing the original data.

Answer 5

Answer №3

It seems like the solution does not rely on RxJS, you are correct. Instead of using RxJS, you can link necessary actions with promises. One approach could be to create a versatile function or class for this purpose (without error handling, just offering an example):

class ActionQueue {

    private currentTask: Promise<void> = Promise.resolve();

    public execute(action: () => Promise<void>): Promise<void> {
       const prevPromise = this.currentTask;
       // Replace current promise with next task
       this.currentTask = new Promise<void>(async (resolve, reject) => {
            // Wait for previous tasks to complete
            await prevPromise;
            // Execute the submitted action
            await action();
            // Resolve current promise to proceed onto the next action
            resolve();
        });
        return this.currentTask;
    }

}

This way, you can connect any promise-returning function if needed:

objectCreatedEvent(objectCreated){
    this.actionQueue.execute(() => this.http.post(...));
}

objectNameChangedEvent(objectNameChanged){
    this.actionQueue.execute(() => this.http.post(...));
}

Answer 6

It seems like the solution does not rely on RxJS, you are correct. Instead of using RxJS, you can link necessary actions with promises. One approach could be to create a versatile function or class for this purpose (without error handling, just offering an example):

class ActionQueue {

    private currentTask: Promise<void> = Promise.resolve();

    public execute(action: () => Promise<void>): Promise<void> {
       const prevPromise = this.currentTask;
       // Replace current promise with next task
       this.currentTask = new Promise<void>(async (resolve, reject) => {
            // Wait for previous tasks to complete
            await prevPromise;
            // Execute the submitted action
            await action();
            // Resolve current promise to proceed onto the next action
            resolve();
        });
        return this.currentTask;
    }

}

This way, you can connect any promise-returning function if needed:

objectCreatedEvent(objectCreated){
    this.actionQueue.execute(() => this.http.post(...));
}

objectNameChangedEvent(objectNameChanged){
    this.actionQueue.execute(() => this.http.post(...));
}

Answer 7

Answer №4

Consider using the chain method flatMap() in this manner

this.service.someObjectCreated(queryParam)
    .flatMap((someObjCreatedRsp) => {
        console.log('someObjCreatedRsp', someObjCreatedRsp);
        return this.service.someObjectNameChanged(queryParam)
    })
    .flatMap((someObjNameChangedRsp) => {
        console.log('someObjNameChangedRsp', someObjNameChangedRsp);
        return this.service.someObjectDeleted(queryParam)
    })
    .subscribe((someObjDeletedRsp) => {
        console.log('someObjDeletedRsp', someObjDeletedRsp);
    });

Answer 8

Consider using the chain method flatMap() in this manner

this.service.someObjectCreated(queryParam)
    .flatMap((someObjCreatedRsp) => {
        console.log('someObjCreatedRsp', someObjCreatedRsp);
        return this.service.someObjectNameChanged(queryParam)
    })
    .flatMap((someObjNameChangedRsp) => {
        console.log('someObjNameChangedRsp', someObjNameChangedRsp);
        return this.service.someObjectDeleted(queryParam)
    })
    .subscribe((someObjDeletedRsp) => {
        console.log('someObjDeletedRsp', someObjDeletedRsp);
    });

The art of linking Observables on the fly in rxjs and angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to determine if the current page in Ionic 2 is being loaded from the sidemenu?

Refine current attributes of an object in Typescript

Creating uniform-sized cards with CSS and Bootstrap

Encountering an "Invalid parameter: redirect_uri" error in Keycloak while manually refreshing the page

What is the reason behind the warning about DOM element appearing when custom props are passed to a styled element in MUI?

Is it possible to utilize a variable within the 'has-text()' function during playwright testing?

Troubleshooting: Why is Angular2 ngClass malfunctioning?

Managing a project with multiple tsconfig.json files: Best practices and strategies

What is the best way to assign the value of "this" to a variable within a component using Angular 2 and TypeScript?

Netlify failing to build CRA due to inability to locate local module for method?

Guide on Reacting to an Occurrence in Angular

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

Searching for the correct navigation menu path using Angular 5's query functionality

What is the best data type in Asp Net Core C# for capturing Angular's blob object?

Adding Images Using Angular 8

Utilizing useLocation for Defining Text Styles

Validating forms using TypeScript in a Vue.js application with the Vuetify

Using setAttribute will convert the attribute name to lowercase

Finding the right way to cancel a Firestore stream within a Vue component using the onInvalidate callback

Karma Error: Unexpected token import in Angular 2 - Uncovering a Syntax Error