In-depth understanding of JavaScriptPromise.all()

Promise.all() is a powerful method in JavaScript for handling multiple asynchronous operations simultaneously. It receives an iterable object (usually an array) containing multiple Promises and returns a single Promise. This single Promise will only resolve if all input Promises resolve successfully; if any Promise is rejected, the single Promise will be rejected immediately. This guide will explore the functionality, syntax, behavior, and practical examples of Promise.all().

Grammar

Promise.all() is simple:

Promise.all(iterable);

• iterable: An array or other iterable object containing Promises or values. Non-Promise values ??will be treated as resolved Promises.

Return value

This method returns a Promise with the following behavior:

• If iterable is empty, it will be parsed immediately as an empty array.
• If all Promises in the iterable have succeeded, resolve to an array containing the successful values, keeping their original order.
• If any Promise is rejected, it is rejected immediately and the reason for the first rejected Promise is returned, ignoring the results of all other Promises.

Success and Failure

1. Successful: When all Promises have resolved successfully, Promise.all() returns an array of results in the same order as the input Promises.
2. Failed: If any Promise is rejected, Promise.all() will be rejected immediately and the rejection reason of the Promise will be returned.

Practical example

Example 1: Basic usage

In this example we create three Promises that resolve after different timeouts:

const promise1 = new Promise((resolve) => setTimeout(() => resolve('One'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Two'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Three'), 3000));

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // 輸出: ['One', 'Two', 'Three']
  .catch(error => console.error(error));

Here, Promise.all() waits for all three Promises to resolve, then logs their results to the console as an array.

Example 2: Mixed value processing

You can also mix resolved values ??and Promises:

const p1 = Promise.resolve(42);
const p2 = Promise.resolve('Hello');
const p3 = new Promise((resolve) => setTimeout(() => resolve('World'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values)) // 輸出: [42, 'Hello', 'World']
  .catch(error => console.error(error));

In this case, p1 and p2 resolve immediately, while p3 resolves after one second.

Example 3: Failure Handling

If one of the Promises is rejected, Promise.all() will be rejected immediately:

const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('Failed!'));
const p3 = new Promise((resolve) => setTimeout(() => resolve('This will not run'), 1000));

Promise.all([p1, p2, p3])
  .then(values => console.log(values))
  .catch(error => console.error(error.message)); // 輸出: 'Failed!'

Here, because p2 is rejected, the entire operation fails and an error message is logged.

Promise.all()

• Get multiple resources: When you need to get data from multiple APIs at the same time and wait before processing all responses.
• Parallel processing: When multiple independent tasks are executed simultaneously and their results need to be combined together.
• Batch Operations: When performing batch updates or calculations where each operation can be completed independently.

Conclusion

Promise.all() is an essential tool for managing multiple asynchronous operations in JavaScript. It simplifies code by allowing developers to wait for multiple Promises to resolve before continuing with other logic. However, it is crucial to handle failures correctly, as failure of any one Promise will cause the entire operation to fail. Understanding how to use Promise.all() effectively allows you to write cleaner, more efficient asynchronous code.

References: [1] http://m.miracleart.cn/link/ebd58b8a3f1d72f4206201da62fb1204 [2] http://m.miracleart.cn/link/9181a74736d3b86345dadbc90e29390e [3] http://m.miracleart.cn/link/2a3e953a5e3d81e67945bce5519f84c8 [4] http://m.miracleart.cn/link/4c0303ffb193bd5e66078909a15268aa [5] http://m.miracleart.cn/link/9c25dc28b94e5226f1983330dc421cec [6] http://m.miracleart.cn/link/b2f1384b8feb04d2de9a85124dc64613 [7] http://m.miracleart.cn/link/f1e1fd9e97f59379ed79bdf258d55042 [8] http://m.miracleart.cn/link/9a5859b8f76280c97c0c185a19d17014 [9] http://m.miracleart.cn/link/d3f010d6bc392b904f63ce5792891b71 [10] http://m.miracleart.cn/link/4d419d5b4274ea8faaf4f37410b97bd6

The above is the detailed content of Promise.all(). For more information, please follow other related articles on the PHP Chinese website!