Running Async Tasks in Parallel
An await statement waits for one Promise before continuing.
If several asynchronous operations do not depend on each other, waiting for them one by one may be slower than necessary.
Instead, you can start all the operations at the same time and wait for them together.
Sequential Operations
When each operation depends on the previous one, use multiple
await statements.
Example
async function loadData() {
let response1 = await fetch("customer.json");
let customer = await response1.json();
let response2 = await fetch(customer.orders);
let orders = await response2.json();
console.log(orders);
}
Independent Operations
If asynchronous operations are independent, they can start at the same time.
This is called running tasks in parallel.
Example
async function loadData() {
let customerPromise = fetch("customer.json");
let productsPromise = fetch("products.json");
let newsPromise = fetch("news.json");
let customer = await customerPromise;
let products = await productsPromise;
let news = await newsPromise;
}
All three downloads begin immediately.
The await statements wait only when the results are needed.
Promise.all()
The Promise.all() method waits for several Promises to complete.
It returns a single Promise that resolves when every Promise has been fulfilled.
Example
async function loadData() {
let results = await Promise.all([
fetch("customer.json"),
fetch("products.json"),
fetch("news.json")
]);
console.log(results);
}
Reading JSON Responses
You can combine Promise.all() with response.json().
Example
async function loadData() {
let responses = await Promise.all([
fetch("customer.json"),
fetch("products.json"),
fetch("news.json")
]);
let data = await Promise.all(
responses.map(response => response.json())
);
console.log(data);
}
Promise.all() Errors
If one Promise is rejected, the Promise returned by Promise.all() is also rejected.
Example
try {
let data = await Promise.all([
fetch("a.txt"),
fetch("b.txt"),
fetch("missing.txt")
]);
}
catch(err) {
console.log(err);
}
Promise.allSettled()
The Promise.allSettled() method waits until every Promise has finished.
Unlike Promise.all(), it does not stop when one Promise is rejected.
Example
let results = await Promise.allSettled([
fetch("a.txt"),
fetch("b.txt"),
fetch("missing.txt")
]);
Each result contains a status of fulfilled or rejected.
Promise.any()
The Promise.any() method returns the first fulfilled Promise.
Rejected Promises are ignored unless every Promise is rejected.
Example
let fastest = await Promise.any([
fetch("server1/data"),
fetch("server2/data"),
fetch("server3/data")
]);
Promise.race()
The Promise.race() method returns the first Promise that settles.
The first Promise may be fulfilled or rejected.
Example
let result = await Promise.race([
fetch("server1/data"),
fetch("server2/data")
]);
Which Method to Use?
| Method | Waits For | Typical Use |
|---|---|---|
Promise.all() |
All fulfilled | Load everything |
Promise.allSettled() |
All settled | Accept failures |
Promise.any() |
First fulfilled | Fastest successful response |
Promise.race() |
First settled | Timeouts and competitions |
| Method | Fails if one rejects? | Returns |
|---|---|---|
Promise.all() | Yes | Array of values |
Promise.allSettled() | No | Array of result objects |
Promise.any() | Only if all reject | First fulfilled value |
Promise.race() | If the first settles with rejection | First settled result |
Summary
- Use sequential
awaitstatements when one operation depends on another. - Start independent asynchronous operations together whenever possible.
- Use
Promise.all()when every operation must succeed. - Use
Promise.allSettled()when you want every result, even if some fail. - Use
Promise.any()when you need the first successful result. - Use
Promise.race()when you need the first Promise that settles.
❮ Previous Next ❯
