How to Create a Promise in JavaScript<\/strong><\/h2>\n\n\n\nCreating a promise in JavaScript comes down to the Promise<\/code> constructor, which takes a function with two parameters: resolve<\/code> and reject<\/code>. You call one or the other depending on how the operation turns out.<\/p>\n\n\n\nconst myPromise = new Promise((resolve, reject) => {\n const success = true;\n\n if (success) {\n resolve(\"Task completed!\");\n } else {\n reject(\"Task failed.\");\n }\n});<\/code><\/pre>\n\n\n\nInside the function, you run whatever async logic you need, then call resolve(value)<\/code> when it works or reject(error)<\/code> when it doesn’t. <\/p>\n\n\n\n<\/p>\n\n\n\n
How to Use a Promise in JavaScript<\/strong><\/h2>\n\n\n\nCreating a promise in JavaScript is only half the job; you also need a way to actually get the result out of it once it settles. That’s where consuming methods like .then()<\/code>, chaining, and async\/await<\/code> come in. Below are the core ways you’ll use promises in real code.<\/p>\n\n\n\n1. Promise.then(), catch(), and finally() Explained<\/strong><\/h3>\n\n\n\nOnce you have a promise, .then()<\/code> is how you consume it; it runs when the promise resolves and hands you the value. .catch()<\/code> does the same thing but for when the promise rejects, and .finally()<\/code> runs no matter what happened, success or failure.<\/p>\n\n\n\nconst order = new Promise((resolve, reject) => {\n const isAvailable = true;\n\n if (isAvailable) {\n resolve(\"Pizza is on the way!\");\n } else {\n reject(\"Sorry, pizza is out of stock.\");\n }\n});\n\norder\n .then((result) => {\n console.log(result);\n })\n .catch((error) => {\n console.log(error);\n })\n .finally(() => {\n console.log(\"Order process finished.\");\n });\n<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\n- The
order<\/code> promise checks if isAvailable<\/code> is true.<\/li>\n\n\n\n- Since it’s true, it calls
resolve(\"Pizza is on the way!\")<\/code>.<\/li>\n\n\n\n- That resolved value is exactly what
.then()<\/code> receives as its result<\/code> parameter.<\/li>\n\n\n\n- This is why
console.log(result)<\/code> prints “Pizza is on the way!”.<\/li>\n\n\n\n- If
isAvailable<\/code> had been false, reject()<\/code> would run instead, and .catch()<\/code> would catch that error message.<\/li>\n\n\n\n.finally()<\/code> fires at the end no matter which branch ran; since it doesn’t care about success or failure, it just marks the promise as settled.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
2. How to Chain Promises in JavaScript<\/strong><\/h3>\n\n\n\nA promise in JavaScript can be chained when one async step depends on the result of a previous one. Each .then()<\/code> returns a new promise, so you can keep stacking them instead of nesting callbacks inside each other.<\/p>\n\n\n\nfunction getUser() {\n return new Promise((resolve) => {\n resolve({ id: 1, name: \"Alex\" });\n });\n}\n\nfunction getOrders(user) {\n return new Promise((resolve) => {\n resolve(`Orders for ${user.name}`);\n });\n}\n\ngetUser()\n .then((user) => getOrders(user))\n .then((orders) => console.log(orders));\n<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\ngetUser()<\/code> returns a promise that resolves with a user object.<\/li>\n\n\n\n- The first
.then()<\/code> receives that object as user<\/code>.<\/li>\n\n\n\n- It passes
user<\/code> straight into getOrders(user)<\/code>, which itself returns another promise.<\/li>\n\n\n\n- Since
.then()<\/code> automatically waits for whatever promise you return inside it, the second .then()<\/code> doesn’t run until getOrders()<\/code> resolves.<\/li>\n\n\n\n- That second
.then()<\/code> receives the resolved value as orders<\/code>.<\/li>\n\n\n\n- The result is a flat, readable sequence instead of one function buried inside another.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
3. Promise vs Callback in JavaScript<\/strong><\/h3>\n\n\n\nA callback is just a function passed into another function to run later, and it was the original way JavaScript handled async code before promises existed. The problem shows up once you need multiple async steps in a row.<\/p>\n\n\n\n
\/\/ Callback style\ngetUser(function (user) {\n getOrders(user, function (orders) {\n console.log(orders);\n });\n});\n\n\/\/ Promise style\ngetUser()\n .then((user) => getOrders(user))\n .then((orders) => console.log(orders));\n<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\n- In the callback version, each step is nested inside the previous one.<\/li>\n\n\n\n
- As you add more steps, the code drifts further to the right; this is the “callback hell” problem.<\/li>\n\n\n\n
- The promise version does the exact same job but keeps everything in a flat, linear structure.<\/li>\n\n\n\n
- Errors are also easier to manage with promises, since one
.catch()<\/code> at the end can handle failures from any step in the chain.<\/li>\n\n\n\n- With callbacks, you’d need to add error checks inside every single one instead.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
4. Async\/Await vs Promise in JavaScript<\/strong><\/h3>\n\n\n\nasync\/await<\/code> isn’t a replacement for promises; it’s built directly on top of them. async<\/code> marks a function as one that returns a promise, and await<\/code> pauses that function until the promise it’s waiting on settles.<\/p>\n\n\n\nasync function getOrderDetails() {\n const user = await getUser();\n const orders = await getOrders(user);\n console.log(orders);\n}<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\nawait getUser()<\/code> pauses execution inside getOrderDetails()<\/code> until the getUser()<\/code> promise resolves.<\/li>\n\n\n\n- Once resolved, that value is assigned directly to
user<\/code>, no .then()<\/code> needed.<\/li>\n\n\n\n- The next line does the same thing with
getOrders(user)<\/code>.<\/li>\n\n\n\n- The result reads almost like regular, synchronous code, even though everything happening is still fully asynchronous behind the scenes.<\/li>\n\n\n\n
- This is why most developers reach for
async\/await<\/code> over chained .then()<\/code> calls once a sequence has more than one or two steps.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
5. How to Handle Errors in a Promise<\/strong><\/h3>\n\n\n\nErrors in promises are handled with .catch()<\/code> in chains, or try\/catch<\/code> when you’re using async\/await<\/code>. Skipping this step is one of the most common reasons apps crash silently or fail without explanation.<\/p>\n\n\n\nasync function getOrderDetails() {\n try {\n const user = await getUser();\n const orders = await getOrders(user);\n console.log(orders);\n } catch (error) {\n console.log(\"Something went wrong:\", error);\n }\n}<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\n- The
try<\/code> block runs the normal async logic, await<\/code>ing each promise one after another.<\/li>\n\n\n\n- If either
getUser()<\/code> or getOrders()<\/code> rejects at any point, execution immediately jumps to the catch<\/code> block instead of continuing.<\/li>\n\n\n\n- The rejection reason gets passed in as
error<\/code>.<\/li>\n\n\n\n- This is the
async\/await<\/code> equivalent of chaining a single .catch()<\/code> at the end of a .then()<\/code> sequence.<\/li>\n\n\n\n- It gives you one place to handle failure no matter which step actually caused it.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Combining Multiple Promises in JavaScript<\/strong><\/h2>\n\n\n\nSometimes you’re dealing with several promises at once, like fetching data from three different APIs at the same time. JavaScript gives you four built-in methods for this, each handling multiple promises a little differently.<\/p>\n\n\n\n
1. Promise.all()<\/strong><\/h3>\n\n\n\nPromise.all()<\/code> takes an array of promises and waits for all of them to resolve. If even one of them rejects, the whole thing rejects immediately, without waiting for the others to finish.<\/p>\n\n\n\nconst p1 = Promise.resolve(\"User data\");\nconst p2 = Promise.resolve(\"Order data\");\nconst p3 = Promise.resolve(\"Payment data\");\n\nPromise.all([p1, p2, p3])\n .then((results) => console.log(results))\n .catch((error) => console.log(error));\n<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\nPromise.all()<\/code> receives an array containing p1<\/code>, p2<\/code>, and p3<\/code>.<\/li>\n\n\n\n- It waits until every single promise in that array resolves.<\/li>\n\n\n\n
- Once they’re all done,
.then()<\/code> receives results<\/code> as an array, in the same order as the input, holding each resolved value.<\/li>\n\n\n\n- If any one of
p1<\/code>, p2<\/code>, or p3<\/code> had rejected instead, .catch()<\/code> would run immediately with that rejection reason, and it would ignore the results from the other promises entirely.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
2. Promise.allSettled()<\/strong><\/h3>\n\n\n\nPromise.allSettled()<\/code> also waits for every promise to finish, but unlike Promise.all()<\/code>, it never short-circuits on a rejection. It gives you the outcome of every promise, whether it succeeded or failed.<\/p>\n\n\n\nconst p1 = Promise.resolve(\"User data\");\nconst p2 = Promise.reject(\"Order failed\");\n\nPromise.allSettled([p1, p2]).then((results) => console.log(results));\n<\/code><\/pre>\n\n\n\nCode Explanation:<\/em><\/strong><\/p>\n\n\n\n\nPromise.allSettled()<\/code> waits for both p1<\/code> and p2<\/code> to settle, regardless of outcome.<\/li>\n\n\n\n- The
results<\/code> array contains one object per promise, each with a status<\/code> field set to either \"fulfilled\"<\/code> or \"rejected\"<\/code>.<\/li>\n\n\n\n- For
p1<\/code>, the object includes a value<\/code> field holding \"User data\"<\/code>.<\/li>\n\n\n\n- For
p2<\/code>, the object includes a reason<\/code> field holding \"Order failed\"<\/code>.<\/li>\n\n\n\n