JavaScript Asynchronous
Promise.allwaits for several promises at once instead of one after another.
Awaiting in a loop runs the work one at a time.
When the jobs do not depend on each other, that is wasted waiting.
Example
javascript
const a = Promise.resolve(1);
const b = Promise.resolve(2);
Promise.all([a, b]).then(function (values) {
console.log(values.join(","));
});The output is 1,2, in the order the promises were given.
all waits for every promise, and rejects if any one fails.
allSettled waits for every promise and never rejects.
race settles with the first to finish, any with the first to succeed.
Syntax
javascript
const values = await Promise.all([a, b, c]);The results come back in the order of the input, not of finishing.
Even if a later promise finishes first, the array order matches the input.
Example
javascript
function delay(value, ms) {
return new Promise(function (resolve) {
setTimeout(function () { resolve(value); }, ms);
});
}
Promise.all([delay("slow", 30), delay("fast", 5)]).then(function (values) {
console.log(values.join(","));
});The output is slow,fast, despite fast finishing first.
all gives up as soon as any promise rejects.
You get the first rejection reason and none of the successful values.
Example
javascript
Promise.all([Promise.resolve(1), Promise.reject(new Error("failed"))])
.then(function () {
console.log("never runs");
})
.catch(function (error) {
console.log("caught: " + error.message);
});The successful value is lost, which is not always what you want.
Every result is described with a status, so nothing is lost.
Use it when partial success is still useful.
Example
javascript
Promise.allSettled([Promise.resolve(1), Promise.reject("nope")])
.then(function (results) {
console.log(results.map(function (r) { return r.status; }).join(","));
});The output is fulfilled,rejected.
This includes a rejection, so the first to fail wins too.
Example
javascript
function delay(value, ms) {
return new Promise(function (resolve) {
setTimeout(function () { resolve(value); }, ms);
});
}
Promise.race([delay("slow", 40), delay("quick", 5)]).then(function (value) {
console.log(value);
});A common use is adding a timeout to a slow request.
Use all when the jobs are independent.
Keep awaiting one at a time when each step needs the last one's result.
Example
javascript
function delay(value) {
return Promise.resolve(value);
}
async function run() {
const [a, b] = await Promise.all([delay("one"), delay("two")]);
console.log(a + " " + b);
}
run();Destructuring the result array reads very naturally.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Promise.all</title>
</head>
<body>
<h1>Promise.all</h1>
<p id="out">Loading...</p>
<script>
function delay(value, ms) {
return new Promise(function (resolve) {
setTimeout(function () { resolve(value); }, ms);
});
}
async function load() {
const out = document.getElementById("out");
try {
const [user, posts] = await Promise.all([
delay("Ada", 800),
delay(3, 600)
]);
out.textContent = user + " has " + posts + " posts";
} catch (error) {
out.textContent = "Failed: " + error.message;
}
}
load();
</script>
</body>
</html>Run the above example in the Try It Editor.
Try awaiting one at a time:
Replace the Promise.all with two separate awaits and compare how long it takes.
Promise.all runs promises together and waits for all of them.allSettled reports every outcome and never rejects.race settles with the first to finish, whichever way.Running independent work in parallel is often the easiest performance win there is.
The choice between all and allSettled is about whether partial results help.
Keep sequential awaits for steps that genuinely depend on each other.