Javascript ECMAScript6 promise methods
A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.
Promise States
javascript
// 1. Pending - Initial state, operation hasn't completed yet
// 2. Fulfilled - Operation completed successfully
// 3. Rejected - Operation failed 1. Promise Constructor
Creates a new Promise.
Syntax
javascript
const promise = new Promise((resolve, reject) => {
// async operation
if (success) {
resolve(value); // Fulfill the promise
} else {
reject(error); // Reject the promise
}
});Example
javascript
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});
myPromise.then(result => {
console.log(result); // "Success!" after 1 second
});2. .then()
Handles the fulfilled state of a Promise. Can chain multiple .then() calls.
Syntax
javascript
promise.then(onFulfilled, onRejected);Examples
Example 1: Basic Usage
javascript
const promise = Promise.resolve(10);
promise.then(value => {
console.log("Resolved with:", value); // "Resolved with: 10"
});Example 2: Chaining .then()
javascript
Promise.resolve(5)
.then(num => {
console.log(num); // 5
return num * 2;
})
.then(num => {
console.log(num); // 10
return num + 5;
})
.then(num => {
console.log(num); // 15
});Example 3: With Both Parameters (Deprecated - Use .catch() instead)
javascript
const promise = Promise.reject("Error occurred");
promise.then(
result => console.log("Success:", result),
error => console.log("Error:", error) // "Error: Error occurred"
);3. .catch()
Handles the rejected state of a Promise.
Syntax
javascript
promise.catch(onRejected);Examples
Example 1: Basic Error Handling
javascript
Promise.reject("Something went wrong")
.catch(error => {
console.log("Caught error:", error); // "Caught error: Something went wrong"
});Example 2: Catch Errors in Chain
javascript
Promise.resolve(10)
.then(num => {
throw new Error("Oops!"); // Create an error
})
.then(num => {
console.log(num); // This won't run
})
.catch(error => {
console.log("Error caught:", error.message); // "Error caught: Oops!"
});Example 3: Practical API Example
javascript
function fetchUser(id) {
return new Promise((resolve, reject) => {
if (id > 0) {
resolve({ id, name: "John" });
} else {
reject("Invalid user ID");
}
});
}
fetchUser(-1)
.then(user => console.log(user))
.catch(error => {
console.log("Error:", error); // "Error: Invalid user ID"
});4. .finally()
Executes code after a Promise settles (fulfilled or rejected), regardless of outcome.
Syntax
javascript
promise.finally(onFinally);Examples
Example 1: Cleanup Code
javascript
let loading = true;
fetchData()
.then(data => console.log(data))
.catch(error => console.log(error))
.finally(() => {
loading = false;
console.log("Request complete"); // Always runs
});Example 2: Hide Loading Spinner
javascript
function fetchWithSpinner() {
showSpinner();
return fetch('https://api.example.com/data')
.then(response => response.json())
.finally(() => {
hideSpinner(); // Always called
});
}Example 3: Complete Example
javascript
Promise.resolve("Success")
.then(result => {
console.log("Then:", result);
return result;
})
.catch(error => {
console.log("Catch:", error);
})
.finally(() => {
console.log("Finally - Always executes!");
});
// Output:
// Then: Success
// Finally - Always executes! 5. Promise.all()
Waits for all Promises to fulfill. If any rejects, the whole thing rejects. Returns an array of results in the same order.
Syntax
javascript
Promise.all([promise1, promise2, ...])Examples
Example 1: Multiple Parallel Operations
javascript
const p1 = Promise.resolve(3);
const p2 = new Promise(resolve => setTimeout(() => resolve("Foo"), 100));
const p3 = fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json());
Promise.all([p1, p2, p3])
.then(values => {
console.log(values);
// [3, "Foo", { userId: 1, id: 1, title: "...", ... }]
});Example 2: Parallel API Calls
javascript
function getMultipleUsers(ids) {
const promises = ids.map(id =>
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(r => r.json())
);
return Promise.all(promises);
}
getMultipleUsers([1, 2, 3])
.then(users => console.log(users));Example 3: One Promise Fails
javascript
const p1 = Promise.resolve(1);
const p2 = Promise.reject("Error!");
const p3 = Promise.resolve(3);
Promise.all([p1, p2, p3])
.then(values => console.log(values))
.catch(error => {
console.log("Failed:", error); // "Failed: Error!"
});6. Promise.allSettled()
Waits for all Promises to settle (fulfilled or rejected). Always succeeds with an array of results showing status and value/reason.
Syntax
javascript
Promise.allSettled([promise1, promise2, ...])Examples
Example 1: Mixed Success and Failure
javascript
const promises = [
Promise.resolve(1),
Promise.reject("Error"),
Promise.resolve(3)
];
Promise.allSettled(promises)
.then(results => {
console.log(results);
/* Output:
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: 'Error' },
{ status: 'fulfilled', value: 3 }
]
*/
});Example 2: Practical Use Case
javascript
function processMultipleRequests(requests) {
const promises = requests.map(req =>
fetch(req).catch(err => Promise.reject(err))
);
return Promise.allSettled(promises)
.then(results => {
const successful = results.filter(r => r.status === 'fulfilled');
const failed = results.filter(r => r.status === 'rejected');
console.log(`Successful: ${successful.length}, Failed: ${failed.length}`);
return results;
});
}7. Promise.race()
Returns the result of the first Promise to settle (either fulfilled or rejected), ignoring the rest.
Syntax
javascript
Promise.race([promise1, promise2, ...])Examples
Example 1: First to Complete Wins
javascript
const p1 = new Promise(resolve => setTimeout(() => resolve("Fast"), 100));
const p2 = new Promise(resolve => setTimeout(() => resolve("Slow"), 500));
Promise.race([p1, p2])
.then(result => {
console.log(result); // "Fast" (first to resolve)
});Example 2: Timeout Implementation
javascript
function fetchWithTimeout(url, timeout) {
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject("Request timeout"), timeout)
);
return Promise.race([
fetch(url),
timeoutPromise
]);
}
fetchWithTimeout('https://api.example.com/data', 5000)
.then(response => response.json())
.catch(error => console.log(error));Example 3: First Success or First Failure
javascript
const success = new Promise(resolve => setTimeout(() => resolve("Done"), 200));
const failure = new Promise((_, reject) => setTimeout(() => reject("Failed"), 100));
Promise.race([success, failure])
.then(result => console.log(result))
.catch(error => {
console.log("Error:", error); // "Error: Failed" (rejects first)
});8. Promise.any() (ES2021)
Waits for the first Promise to fulfill. If all reject, returns aggregate error.
Syntax
javascript
Promise.any([promise1, promise2, ...])Examples
Example 1: First Successful Promise
javascript
const p1 = Promise.reject("Error 1");
const p2 = new Promise(resolve => setTimeout(() => resolve("Success"), 100));
const p3 = Promise.reject("Error 3");
Promise.any([p1, p2, p3])
.then(result => {
console.log(result); // "Success"
});Example 2: Difference from Promise.race()
javascript
// Promise.any() - ignores rejections, waits for first success
const p1 = Promise.reject("Error");
const p2 = Promise.resolve("Success");
Promise.any([p1, p2])
.then(result => console.log(result)); // "Success"
// Promise.race() - returns first settled (even if rejected)
Promise.race([p1, p2])
.catch(error => console.log(error)); // "Error" Example 3: All Promises Reject
javascript
Promise.any([
Promise.reject("Error 1"),
Promise.reject("Error 2"),
Promise.reject("Error 3")
])
.catch(error => {
console.log(error);
// AggregateError: All promises were rejected
});9. Promise.resolve()
Creates a Promise that is immediately fulfilled with a value.
Syntax
javascript
Promise.resolve(value);Examples
Example 1: Resolve with Value
javascript
Promise.resolve(42)
.then(value => {
console.log(value); // 42
});Example 2: Resolve with Promise
javascript
const p1 = Promise.resolve(5);
const p2 = Promise.resolve(p1);
p2.then(value => {
console.log(value); // 5
});Example 3: Thenable Objects
javascript
const thenable = {
then(resolve) {
resolve("Thenable resolved");
}
};
Promise.resolve(thenable)
.then(value => {
console.log(value); // "Thenable resolved"
});10. Promise.reject()
Creates a Promise that is immediately rejected with a reason.
Syntax
javascript
Promise.reject(reason);Examples
Example 1: Reject with Error
javascript
Promise.reject(new Error("Something went wrong"))
.catch(error => {
console.log(error.message); // "Something went wrong"
});Example 2: Reject with Value
javascript
Promise.reject("Failed")
.catch(reason => {
console.log(reason); // "Failed"
});Comparison Table
| Method | Waits For | Returns On | Behavior |
| Promise.all() | All to fulfill | All values | Rejects if any rejects |
| Promise.allSettled() | All to settle | Status array | Never rejects |
| Promise.race() | Any to settle | First result | Returns first result (any state) |
| Promise.any() | Any to fulfill | First value | Rejects if all reject |
Complete Real-World Example
javascript
// Fetch multiple users and process results
async function processUsers() {
try {
// Parallel requests
const [user1, user2, user3] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/users/1').then(r => r.json()),
fetch('https://jsonplaceholder.typicode.com/users/2').then(r => r.json()),
fetch('https://jsonplaceholder.typicode.com/users/3').then(r => r.json())
]);
console.log("Users:", [user1, user2, user3]);
} catch (error) {
console.error("Error fetching users:", error);
}
}
processUsers();Promise.all() vs allSettled() vs race() vs any()
javascript
const promises = [
Promise.resolve(1),
Promise.reject("Error"),
new Promise(r => setTimeout(() => r(3), 100))
];
// Promise.all() - ❌ Fails immediately on rejection
Promise.all(promises).catch(e => console.log("all:", e));
// Promise.allSettled() - ✅ Waits for all
Promise.allSettled(promises).then(r => console.log("allSettled:", r));
// Promise.race() - ✅ Returns first (rejected or resolved)
Promise.race(promises).catch(e => console.log("race:", e));
// Promise.any() - ✅ Returns first fulfilled
Promise.any(promises).then(r => console.log("any:", r));ES6 Promises are fundamental to modern JavaScript and essential for handling asynchronous operations efficiently!
