Observable - transforming two promises into an observable stream

Question

Observable - transforming two promises into an observable stream

I am facing a common scenario where I am looking to chain two promises together in such a way that if the first promise fails, the second promise needs to be canceled. In the world of 'Promises', the code would look something like this:

Fn1.doPromise( initialData )
  .then(info => {
        Fn2.doPromise( info )
              .then(result => {
                  //success - return result
              })
              .catch(error => {
                //error
              });
  })
.catch(error => {
  //cancel 2nd promise and show error
});

Now, I am investigating the best approach to achieve this using Observables, possibly with a library like RxJS. I would appreciate any insights or solutions shared. Thank you in advance!

javascript rxjs observable es6-promise

Answer 1

Answer №1

When it comes to handling errors in RxJS, the approach is discussed thoroughly here. The key points include:

Catching Errors (using the catch operator either at the instance or class level)
Ignoring Errors with onErrorResumeNext
Retrying Sequences (using retry)
Ensuring Cleanup (with finally)
Ensuring Resource Disposal (using finally or using)
Delaying Errors (via mergeDelayError)

If you have a specific question, you can utilize Rx.Observable.fromPromise to convert a promise into an observable; and Rx.Observable.prototype.catch to handle errors as they arise.

Rx.Observable.fromPromise(Fn1.doPromise( initialData ))
  .flatMap(info => {
        return Rx.Observable.fromPromise(Fn2.doPromise( info ))
              .flatMap(result => {
                  //success - return result
                  // !! Make sure to return an observable or a promise here !!
              })
              .catch(error => {
                //error
                // !! Make sure to return an observable here !!
              });
  })
.catch(error => {
  //cancel 2nd promise and display error
  // !! Make sure to return an observable here !!
});

Here are some examples to further illustrate:

Answer 2

When it comes to handling errors in RxJS, the approach is discussed thoroughly here. The key points include:

Catching Errors (using the catch operator either at the instance or class level)
Ignoring Errors with onErrorResumeNext
Retrying Sequences (using retry)
Ensuring Cleanup (with finally)
Ensuring Resource Disposal (using finally or using)
Delaying Errors (via mergeDelayError)

If you have a specific question, you can utilize Rx.Observable.fromPromise to convert a promise into an observable; and Rx.Observable.prototype.catch to handle errors as they arise.

Rx.Observable.fromPromise(Fn1.doPromise( initialData ))
  .flatMap(info => {
        return Rx.Observable.fromPromise(Fn2.doPromise( info ))
              .flatMap(result => {
                  //success - return result
                  // !! Make sure to return an observable or a promise here !!
              })
              .catch(error => {
                //error
                // !! Make sure to return an observable here !!
              });
  })
.catch(error => {
  //cancel 2nd promise and display error
  // !! Make sure to return an observable here !!
});

Here are some examples to further illustrate:

Answer 3

Answer №2

After conducting additional research, I managed to come across a versatile solution for chaining promises. This new method allows me to utilize as many promises as necessary in my code.

const executeAllPromises = (...funcs) => 
   funcs.reduce((acc, func) => 
   acc.flatMap(func), Rx.Observable.just())

executeAllPromises(promise1, promise2, promise3).subscribe();

Answer 4

After conducting additional research, I managed to come across a versatile solution for chaining promises. This new method allows me to utilize as many promises as necessary in my code.

const executeAllPromises = (...funcs) => 
   funcs.reduce((acc, func) => 
   acc.flatMap(func), Rx.Observable.just())

executeAllPromises(promise1, promise2, promise3).subscribe();

Observable - transforming two promises into an observable stream

Answer №1

Answer №2

Similar questions

Display or conceal a div depending on the selected radio button

How can jQuery Validate show validation messages specific to each field?

What steps can I take to completely remove JavaScript from an HTML document?

What is the process for creating URL query parameters?

napi and SWIG: ThreadSafeFunction only runs in a thread after the thread has finished its execution

What is the best way to create a function that can disable console.log and be imported into other React files for easy access?

The dynamic functionality of the Bootstrap React Modal Component seems to be malfunctioning

What is the reason behind why create-react-app generates the App.js file as a functional component?

Problem with image title in jQuery mobile

What is the best method for deleting the div with id "__next" in Next.js?

Unable to adjust image opacity using jQuery

Is it necessary to re-export a module after modifying an attribute in it in JS/ES6?

Converting JSON formatting from Object to Array: A Comprehensive Guide

Ways to reset input fields following form submission

Creating beautiful prints with images

Navigating from the Login Page to the Dashboard in Vue.js following successful token validation

Steps for importing a JavaScript file from Landkit into a Vue project

Guide to implementing a delay in JavaScript/jQuery code right after invoking an asynchronous function

Encounter a 401 error code while attempting to fetch data from CouchDB using an AJAX request

What is the reason for the regeneration of the 2D array?