If the promise does not come to fruition, handle the setback and move on to

Question

If the promise does not come to fruition, handle the setback and move on to

Presently, my code looks like this:

const promise1 = aPromiseCall().then(r => logger(r)).catch(e => logger(e));

const promise2 = anotherPromiseCall().then(r => logger(r)).catch(e => logger(e));

Within an async function, I execute the following:

const results = Promise.all([promise1, promise2]);

I have structured it in this manner to ensure that if promise1 fails, promise2 can still be executed. However, I am uncertain whether this is the most optimal approach. Should I include those then, catch statements in each individual promise, or is there a more conventional way to achieve the same result?

Additionally, I want to guarantee that ALL promises are either resolved or rejected before proceeding with the execution of my code, which is why I grouped them within a Promise.all block.

javascript promise async-await

Answer 1

Answer №1

For information on how to handle errors in Promise.all, please visit this link

Promise.all operates on an all-or-nothing basis. It will only resolve once all promises in the array have resolved, or it will reject as soon as one of them rejects. In simpler terms, it either resolves with an array of all resolved values, or rejects with a single error.

You can implement code similar to this example-

Promise.all([promise1, promise2]).then(r => console.log(r)).catch(e => console.log(e));

If you are looking for a solution to a specific issue, you can check out this resource.

let a = new Promise((res, rej) => res('Resolved!')),
    b = new Promise((res, rej) => rej('Rejected!')),
    c = a.catch(e => { console.log('"a" failed.'); return e; }),
    d = b.catch(e => { console.log('"b" failed.'); return e; });

Promise.all([c, d])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

Promise.all([a.catch(e => e), b.catch(e => e)])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

Answer 2

For information on how to handle errors in Promise.all, please visit this link

Promise.all operates on an all-or-nothing basis. It will only resolve once all promises in the array have resolved, or it will reject as soon as one of them rejects. In simpler terms, it either resolves with an array of all resolved values, or rejects with a single error.

You can implement code similar to this example-

Promise.all([promise1, promise2]).then(r => console.log(r)).catch(e => console.log(e));

If you are looking for a solution to a specific issue, you can check out this resource.

let a = new Promise((res, rej) => res('Resolved!')),
    b = new Promise((res, rej) => rej('Rejected!')),
    c = a.catch(e => { console.log('"a" failed.'); return e; }),
    d = b.catch(e => { console.log('"b" failed.'); return e; });

Promise.all([c, d])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

Promise.all([a.catch(e => e), b.catch(e => e)])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

Answer 3

Answer №2

Quoting from the MDN:

If any of the elements in Promise.all are rejected, the entire promise is rejected. For instance, if you provide four promises that resolve after a timeout and one promise that rejects instantly, then the overall Promise.all will be immediately rejected.

To handle potential rejections effectively:

const promise1 = makeAPromiseCall();        
const promise2 = makeAnotherPromiseCall();


// Within your async function:

const results = await Promise.all([
  promise1.catch(error => error),
  promise2.catch(error => error),
]);

console.log(results[0])
console.log(results[1])

var promise1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('resolved'), 2000); 
}); 

var promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('rejected'), 1000); 
});

(async function() {
  const results = await Promise.all([
    promise1.catch(error => error),
    promise2.catch(error => error),
  ]);

  console.log(results[0]);
  console.log(results[1]);
})();

Answer 4

Quoting from the MDN:

If any of the elements in Promise.all are rejected, the entire promise is rejected. For instance, if you provide four promises that resolve after a timeout and one promise that rejects instantly, then the overall Promise.all will be immediately rejected.

To handle potential rejections effectively:

const promise1 = makeAPromiseCall();        
const promise2 = makeAnotherPromiseCall();


// Within your async function:

const results = await Promise.all([
  promise1.catch(error => error),
  promise2.catch(error => error),
]);

console.log(results[0])
console.log(results[1])

var promise1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('resolved'), 2000); 
}); 

var promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('rejected'), 1000); 
});

(async function() {
  const results = await Promise.all([
    promise1.catch(error => error),
    promise2.catch(error => error),
  ]);

  console.log(results[0]);
  console.log(results[1]);
})();

If the promise does not come to fruition, handle the setback and move on to

Answer №1

Answer №2

Similar questions

Ways to retrieve an object from a separate function in JavaScript

JavaScript load event causing a race condition

Assign a value using the select component from Material UI

Initiating a node request utilizing the value of the array index as the req parameter

Material-UI web application experiencing crashes due to worn-out cards, resulting in element type being declared as invalid and raising an error

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I am facing difficulties when trying to map the data using react js/axios

Need to double-click to open my component

Using axios from a different directory on a file system

jQuery mobile page transition issue causing white screen error

Leveraging Gatsbyjs to Integrate GraphQL Data with Material UI Library

Effectively generating observables that extract a designated element from a collection of observables

Utilize AngularJS to inject a value into the jk-rating-stars element

Visualization of pie charts in Angular2 using Google library

CSS fails to render properly on pages containing multiple query strings

Autocomplete like Google with arrow key functionality

Having trouble with the toggle button on the Bootstrap 5 navbar?

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

Executing a script that has been inserted into the page post-loading

What could be causing my resize event to not trigger?