JavaScript Promise.any() Method

Whenever one of the promises we provided inside the iterable object-like array is properly fulfilled or resolved, the procedure returns a promise that either accepts or rejects.

A promise. One of the concurrency promise methods is the any() one. Returning the first fulfilled promise using this way is helpful. Once a promise is fulfilled, it short-circuits instead of waiting for the other promises to follow.

Promise.Any() is resolved as soon as one or more of the promises you pass is satisfied, or it is refused with an AggregateError if all promises are unfulfilled.

Syntax

The following syntax shows the Promise.any() method with input promise arguments.

Explanation: Promise.any() delivers a single promise which resolves to a value that is the outcome of the fulfilled promise when any of the promises in the array object is fulfilled.

Return Value: The following values are returned by this method:

An already-fulfilled Promise is returned if the supplied parameter is void.

The values and specific statuses of each promise passed into it are included in a pending promise created in all other cases.

Status and value are the two attributes that each object
The status is either accepted or fulfilled.
The benefit if the promise is kept or the justification if it is rejected.

Working procedure of the promise.any() method

One of the most popular methods on the Promise object is any(), which is used to execute any promise that has been successfully fulfilled and is not currently in the rejected state.
This method will reject and prevent the execution of the one in the rejected state.
The promise that can be fulfilled the fastest will be carried out first, and the subsequent promises may not be carried out using this approach if there are four promises in line and three of them are successfully carried out (that is, "resolved") and one of them is refused.
Somehow, the Promise.any() method behaves similarly to Promise.
With the race() method, only the successfully fulfilled promise will be executed first; the other promises will not be.

Diagrams

Input argument Diagram

The Promise.any() method with all promises fulfilled operation is shown in the diagram below:

At time t1, the promise1 resolves to the value v1.
At time t2, the promise2 resolves to the value v2.
The Promise.any() function delivers a promise that, at time t1, resolves to the value v1.

Even if some of the promises in the iterable object are rejected, any() delivers a promise that is fulfilled for any first fulfilled promise:

Input argument Diagram

The Promise.any () method's with one promise rejected and other promises fulfilled operation is shown in the diagram below:

Promise1 is declined with a mistake at time point 1.
The promise2 to value v2 at t2 is kept.
A promise that resolves to a value v2-the outcome of the promise2-is returned by the Promise.any() method.

Keep in mind that the Promise.any() method disregards the broken promise (promise1).

any() returns a promise which rejects with an AggregateError containing all the rejection reasons.
If all of the promises in the iterable object are rejected or the IEnumerable object is empty. A subtype of Error is the AggregateError.

Input argument Diagram

The Promise.any() method with all promises rejected operation is shown in the diagram below:

A mistake1 at time1 causes the promise1 to be rejected.

Promise2 is turned down at time two due to an error2.

The AggregateError returned by the Promise.any() method contains the error1 and error2 of all the promises that were rejected together with a promise that was rejected at time t2.

Examples of JavaScript Promise.any() method

The examples promise any() with all of the input Promises. We can create all promises fulfilled, rejected or rejected or fulfilled.

Example 1:

The basic JavaScript's Promise.any() method for results and value with input argument. Using the method, we can get the undefined value and result status with time.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.any() method </title>
<script>
console.log("JavaScript's Promise.any() method");
const pr1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('first Promise is fulfilled');
resolve(1);
}, 1000);
});
const pr2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' second Promise is fulfilled');
resolve(2);
}, 2000);
});
const pr3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' last Promise is fulfilled');
resolve(3);
}, 3000);
});
const pr = Promise.any([pr1, pr2, pr3]);
pr.then((value) => {
console.log('Returned Promises with');
console.log(value);
});
</script>
</head>
<body>
<h3> JavaScript's Promise.any() method  </h3>
</body>
</html>

Output

The image shows all the resolved values of the promise.any() method.

Example 2:

The example shows promises with one rejected and one resolved using the promise method. Here we use multiple promises with a period for the operation.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.any() method </title>
<script>
console.log("JavaScript's Promise.any() method");
const pr1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' first Promise is rejected');
reject('error');
}, 1000);
});
const pr2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' second Promise is fulfilled');
resolve(2);
}, 2000);
});
const pr = Promise.any([pr1, pr2]);
pr.then((value) => {
console.log('Returned Promises with');
console.log(value);
});
</script>
</head>
<body>
<h3> JavaScript's Promise.any() method  </h3>
</body>
</html>

Output

The image shows the one rejected and one resolved value of the promise.any() method.

Example 3:

The example shows promises with all rejected using the promise method. Here we use multiple promises with the required time for the functionality.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.any() method </title>
<script>
console.log("JavaScript's Promise.any() method");
const pr1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' first Promise is rejected');
reject('error');
}, 1000);
});
const pr2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' second Promise is fulfilled');
reject('error1');
}, 2000);
});
const pr3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(' third Promise is fulfilled');
reject('error3');
}, 1000);
});
const pr = Promise.any([pr1, pr2, pr3]);
pr.catch((value) => {
console.log('Returned Promises with rejected message');
console.log(value, value.error);
});
</script>
</head>
<body>
<h3> JavaScript's Promise.any() method  </h3>
</body>
</html>

Output

The image shows all the rejected values of the promise.any() method.

Example 4:

The promise.any() method uses the then, catch, and finally categories to fulfill operation and display output. We can use all the methods with the promise.any() iterable empty value. The finally function calls the input information and displays it as an output.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript's Promise.any() method </title>
<script>
console.log("JavaScript's Promise.any() method");
Promise.any([])
.then((values) => console.log(values))
.catch((err) => console.log(err))
.finally(() => console.log("Operations of the  Promise.any() have completed."));
</script>
</head>
<body>
<h3> JavaScript's Promise.any() method  </h3>
</body>
</html>

Output

The console tab displays output with the aggregate information.

When to utilize the Promise.any() method in JavaScript

To provide a first fulfilled promise in practice, use the Promise.any() method. The Promise.any() function does not hold back until all promises have been fulfilled. In other words, when a promise is fulfilled, the Promise.any() function shorts out.

You might have a resource used by two or more networks that deliver content, for instance (CDN). The Promise.any() method can be used to dynamically load the first resource that becomes accessible.

Example

The next example retrieves two photos using the Promise.any() method and shows the first available one.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content="width=device-width, initial-scale=1.0" />
<title> JavaScript Promise.any() Demo </title>
</head>
<body>
<script>
function getImageData(url) {
return fetch(url).then((response) => {
if (!response.ok) {
throw new Error(`HTTP output status: ${response.status}`);
}
return response.blob();
});
}
let image1 = getImageData(
'https://upload.wikimedia.org/wikipedia/commons/4/43/Siberian_black_tabby_blotched_cat_03.jpg'
);
let image2 = getImageData(
'https://upload.wikimedia.org/wikipedia/commons/a/af/Golden_retriever_eating_pigs_foot.jpg'
);
Promise.any([image1, image2])
.then((data) => {
let objectURLinfo = URL.createObjectURL(data);
let images = document.createElement('img');
images.src = objectURLinfo;
document.body.appendChild(images);
})
.catch((e) => {
console.log(e.message);
});
</script>
</body>
</html>

Output

The output shows one image as promise data, and one image rejected.

How it operates

First, create the getImageBlob() function, which fetches the image's blob from a URL using the retrieve API. The promise object that the getImageBlob() method returns resolves to the image blob.
Make two promises that fetch the images second.
Third, employ the Promise.any() method to display the first image that becomes available.