Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

Question

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

There are two separate HTTP calls on a page that need to be handled independently.

vm.$onInit = function() {
    ....
    ....
    //Retrieve all items during initialization
    ds.getAllItems().then(function(result){
      vm.items = result;
     },function(error){
      vm.errorInApi = true;
    });
    .....
    .....
}
vm.getTimes = function(){
    .....
    .....
    HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
                    .....
}

If both APIs fail, then I want to display a modal pop-up.

I can set a variable to true and if the API calls fail, I will change it to false before displaying the modal.

The question is how long to wait for both APIs to complete?

javascript angularjs http promise

Answer 1

Answer №1

Wondering... why not just flip the promises' polarity and leverage Promise.all()?

Promise.all() typically resolves only when all promises are resolved, but by inverting the promises, it will now resolve once they are all rejected...

var invert = p => new Promise((v, x) => p.then(x, v));

Promise.all([Promise.reject("Error 404"), Promise.reject("Error WTF")].map(invert))
       .then(v => console.log(v));

Building upon @guest271314's input, here's a deeper dive into how flipping promises can be employed for this scenario.

var invert = p => new Promise((v, x) => p.then(x, v)),
    prps   = [Promise.reject("Error 404"), Promise.reject("Error WTF")]; // previously rejected promises

myButton.addEventListener('click', function(e){
                                     setTimeout(function(...p){
                                                  p.push(Promise.reject("Error in Click Event Listener"));
                                                  Promise.all(p.map(invert))
                                                         .then(r => results.textContent = r.reduce((r,nr) => r + " - " + nr));
                                                }, 200, ...prps);
                                   });

<button id="myButton">Check</button>
<p id="results"></p>

If any of the promises—be it the earlier ones or those in the event listener logic—manage to resolve, you won't see any output at all.

Answer 2

Wondering... why not just flip the promises' polarity and leverage Promise.all()?

Promise.all() typically resolves only when all promises are resolved, but by inverting the promises, it will now resolve once they are all rejected...

var invert = p => new Promise((v, x) => p.then(x, v));

Promise.all([Promise.reject("Error 404"), Promise.reject("Error WTF")].map(invert))
       .then(v => console.log(v));

Building upon @guest271314's input, here's a deeper dive into how flipping promises can be employed for this scenario.

var invert = p => new Promise((v, x) => p.then(x, v)),
    prps   = [Promise.reject("Error 404"), Promise.reject("Error WTF")]; // previously rejected promises

myButton.addEventListener('click', function(e){
                                     setTimeout(function(...p){
                                                  p.push(Promise.reject("Error in Click Event Listener"));
                                                  Promise.all(p.map(invert))
                                                         .then(r => results.textContent = r.reduce((r,nr) => r + " - " + nr));
                                                }, 200, ...prps);
                                   });

<button id="myButton">Check</button>
<p id="results"></p>

If any of the promises—be it the earlier ones or those in the event listener logic—manage to resolve, you won't see any output at all.

Answer 3

Answer №2

To find out how many Promises have been rejected, you can use both async/await and .catch(). If the number of rejected Promises is equal to a specified value N, then take action accordingly.

Before doing this, as advised by @trincot, make sure to return the Promise from the function, return a value from the function in the .then() method, and use throw with an Error() in the .catch() or function passed as the second parameter in .then(). For more details, refer to Why is value undefined at .then() chained to Promise?

const N = 2;

function onInit() {
  return Promise.resolve("resolved")
}

function getTimes() {
  return Promise.reject("rejected");
}

const first = onInit();

document.querySelector("button")
.onclick = async function() {
  let n = 0;
  const firstP = await first.catch(() => ++n);
  const secondP = await getTimes().catch(() => ++n);
  if (n === N) {
    // do stuff if `n` is equal to `N`
  } else {
    // do other stuff
    console.log(n, N)
  }
};

<button>click</button>

Answer 4

To find out how many Promises have been rejected, you can use both async/await and .catch(). If the number of rejected Promises is equal to a specified value N, then take action accordingly.

Before doing this, as advised by @trincot, make sure to return the Promise from the function, return a value from the function in the .then() method, and use throw with an Error() in the .catch() or function passed as the second parameter in .then(). For more details, refer to Why is value undefined at .then() chained to Promise?

const N = 2;

function onInit() {
  return Promise.resolve("resolved")
}

function getTimes() {
  return Promise.reject("rejected");
}

const first = onInit();

document.querySelector("button")
.onclick = async function() {
  let n = 0;
  const firstP = await first.catch(() => ++n);
  const secondP = await getTimes().catch(() => ++n);
  if (n === N) {
    // do stuff if `n` is equal to `N`
  } else {
    // do other stuff
    console.log(n, N)
  }
};

<button>click</button>

Answer 5

Answer №3

If you're looking to handle multiple promises simultaneously, consider using Promise.all.

Start by ensuring that your functions return promises:

vm.$onInit = function() {
    ....
    ....
    return ds.getAllItems().then(function(result){
      vm.items = result;
     },function(error){
      vm.errorInApi = true;
    });
}
vm.getTimes = function(){
    .....
    .....
    return HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
                    .....
    });
}

Once you have the promises from each function, create an array with them:

var promiseArray = [];
promiseArray.push(vm.$onInit());
...
promiseArray.push(vm.getTimes());

In the click handler where getTimes is called, add another push for that function.

You can then flip the promise results to detect if both are rejected:

// Flip promises so that a rejected one is regarded as fulfilled and vice versa:
promiseArray = promiseArray.map(promise => promise.then(res => { throw res }).catch(err => err));
// Check if all original promises were rejected
Promise.all(promiseArray).then(function() {
    // Run code when both promises fail
}).catch(err => err); // Ignore any errors

Answer 6

If you're looking to handle multiple promises simultaneously, consider using Promise.all.

Start by ensuring that your functions return promises:

vm.$onInit = function() {
    ....
    ....
    return ds.getAllItems().then(function(result){
      vm.items = result;
     },function(error){
      vm.errorInApi = true;
    });
}
vm.getTimes = function(){
    .....
    .....
    return HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
                    .....
    });
}

Once you have the promises from each function, create an array with them:

var promiseArray = [];
promiseArray.push(vm.$onInit());
...
promiseArray.push(vm.getTimes());

In the click handler where getTimes is called, add another push for that function.

You can then flip the promise results to detect if both are rejected:

// Flip promises so that a rejected one is regarded as fulfilled and vice versa:
promiseArray = promiseArray.map(promise => promise.then(res => { throw res }).catch(err => err));
// Check if all original promises were rejected
Promise.all(promiseArray).then(function() {
    // Run code when both promises fail
}).catch(err => err); // Ignore any errors

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

Answer №1

Answer №2

Answer №3

Similar questions

Discover how to utilize images encoded in base64 format within webhook embeds on Discord

Troubleshooting issues with a Node.js application on Azure App Service

Exploring AngularJS: A closer look at ngOptions expressions

Trouble with displaying my three.js 3D model

Want to achieve success with your AJAX calls in JavaScript? Consider using $.get

Encountered an npm ERR while executing the React project

Create a script that ensures my website can be set as the homepage on any internet browser

Error Loading JQuery: The function $() is not recognized in the Shopify platform

The legends on the Google chart are having trouble being displayed accurately

Creating a default menu within a specific route in Ember.js is a crucial step in

Creating an Angular directive that handles asynchronous attribute interpolation

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

What is the process behind Stackoverflow's "Congratulations, you've earned a new badge" popup window?

Rendering based on conditions with a pair of values

What is preventing me from utilizing my JavaScript constructor function externally?

Retrieve the original content of a file uploaded by a user in Node.js using Express

Is there a way for me to retrieve the element that is linked to the ng-disabled attribute?

Searching for an array of IDs in Mongoose

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Invoking a function passed via props that utilizes react-router's features