What is a Promise
A Promise is an object that represents the final completion or failure of an asynchronous operation and its result value. Simply put, a Promise is a placeholder for a value that will be generated at some later time. Promises are very useful objects for handling asynchronous operations. Promise. All (promisesArrayOrIterable) is a helper function that allows you to process Promises in parallel and get the resulting value in an aggregated array. Let’s learn how promise.all () works.
1.Promise.all()
Promise. All () is the built-in helper function that accepts an array of promises and returns the following form:
const allPromise = Promise.all([promise1, promise2, ...] );
You can then use the then-able syntax to extract the value returned by the Promise:
`allPromise.then(values => { values; // [valueOfPromise1, valueOfPromise2, …] }).catch(error => { error; // rejectReason of any first rejected promise }); `
Or use async/await syntax: ‘try {const values = await allPromise; values; // [valueOfPromise1, valueOfPromise2, …] } catch (error) { error; // rejectReason of any first rejected promise }`
Most useful is that Promises can retrieve resolved or rejected via promise.all ()
AllPromise is an array of Promises if all of the Promise objects were requested successfully. Promises return in order depending on the order they are put into the stack.
But if the last promise is rejected, allPromise will enter the reject state, without waiting for other promises to return correctly.
Example of performing asynchronous operations simultaneously
To demonstrate the workflow of Promise. All (), we chose to use two helper classes, resolveTimeout(value, delay) and rejectTimeout(reason, delay). `function resolveTimeout(value, delay) { return new Promise(
resolve => setTimeout(() => resolve(value), delay));
}
function rejectTimeout(reason, delay) {
return new Promise(
(r, reject) => setTimeout(() => reject(reason), delay)); } `
ResolveTimeout (value, delay) returns a Promise object with a parameter value; rejectTimeout, on the other hand, will return a Promise object with a reason for rejecting it.
As in the simulation example, the store provides a list of vegetables and fruits at the same time, and each list is accessed via an asynchronous operation: `const allPromise = Promise.all([ resolveTimeout([‘potatoes’, ‘tomatoes’], 1000), resolveTimeout([‘oranges’, ‘apples’], 1000) ]);
// wait…
const lists = await allPromise;
// after 1 second
console.log(lists);
// [[‘potatoes’, ‘tomatoes’], [‘oranges’, ‘apples’]]`
const allPromise = Promise.all([…] Returns the Promise object for the new AllPromise. Const lists = await allPromise The const lists = await allPromise statement declares await of 1 second until all of the Promise objects are pushed into the allPromise array. [[‘potatoes’, ‘tomatoes’], [‘oranges’, ‘apples’]] [[‘ oranges’, ‘apples’]]
The order of promises affects the order of results.
Promises to vegetables are first, promises to fruits are second in the input array. The resulting array contains values in the same order — the first vegetable list and the second fruit list.
3. Example: When a Promise blocks
Now imagine this situation: The grocery store is out of fruit. In this case, let’s return the reject of the fruit with an Error message: new Error(‘Out of fruits! ‘) : `const allPromise = Promise.all([ resolveTimeout([‘potatoes’, ‘tomatoes’], 1000), rejectTimeout(new Error(‘Out of fruits!’), 1000) ]);
try { // wait… const lists = await allPromise; } catch (error) { // after 1 second console.log(error.message); // ‘Out of fruits! ‘} `
In this case, allPromise = promise.all ([…]) ), returns a promise, however, when the promise(fruits) returns a new Error(‘Out of fruits! ‘) All AllPromise objects will also return the reject method with the same error. Even if the vegetable’s promise has been fulfilled, promise.all () does not work. Promise.all([…] If there is a promise in the queue, all other promises are reject and return the same reason.
4. To summarize
Promise.all([…] ) is a useful helper function that allows you to perform asynchronous operations in parallel using a failover strategy and aggregate the results into an array.
The original address: https://dmitripavlutin.com/pr…