In this section, we will learn what the Promise then() method is and how to use it in JavaScript.
Note: we’re assuming you’re already familiar with the Promise in general.
What is Promise then() Method in JavaScript?
The `then` method belongs to promise objects, and we use it when we want to create the resolve and rejection handlers for the target promise.
Promise then() Method Syntax:
Here’s the syntax of this method:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
`myPromise`: this is the target promise object that we want to define handlers for it.
Promise then() Method Parameters
The `then` method takes two arguments and both of them are functions.
The first function (first argument) is used to define the handler that will handle the promise object when it successfully resolved. This function will also receive the argument that is passed to the `resolve` function in the executor-function.
The second function (second argument) is used to define the handler that will be called if the target promise gets rejected (if a call to the `reject` function occurred). This function will also receive the argument that is passed to the `reject` function in the executor-function.
Promise then() Method return value
The `then` method returns another promise. This means if the resolved handler of the `then` method is called; at the end it will return another promise object that is resolved as well. Also, if the rejection handler of the `then` method is called, at the end it will return another promise object that is RESOLVED by default. This means we can create multiple `then` methods and chain them to each other.
Also remember that by default the returned Promise of a `then` method does not have a value! But we can use the `return` statement to explicitly define a value for the next `then` handler.
Example: using Promise then() method in JavaScript
function exe(resolve, reject){
setTimeout(()=>{
resolve("Success");
},2000);
}
const prom = new Promise(exe);
prom.then(value=>{
console.log("Resolved handler");
console.log(value);
},
failed=>{
console.log("Failed handler");
console.log(failed);
});
Output:
Resolved handler Success
In the `executor-function`, the `resolve` function is called with the argument `Success`. So the first function (resolve handler) of the method `then` will be called. And this handler will have the message `Success` as its argument.
Chaining Promise then() Method in JavaScript:
As mentioned before, the `then()` method returns another promise as a result. So that means we can put a bunch of then() methods and create a chain as a result.
Example: chaining the Promise then() method in JavaScript
function exe(resolve, reject){
setTimeout(()=>{
resolve("Success");
},2000);
}
const prom = new Promise(exe);
prom.then(value=>{
console.log("The first resolved handler");
console.log(value);
},
failed=>{
console.log("The first failed handler");
console.log(failed);
}).then(value=>{
console.log("The second resolved handler");
console.log(value);
},
failed=>{
console.log("The third failed handler");
console.log(failed);
}).then(value=>{
console.log("The third resolved handler");
console.log(value);
},
failed=>{
console.log("The third failed handler");
console.log(failed);
});
Output:
The first resolved handler Success The second resolved handler undefined The third resolved handler undefined
Note that in this example, the `then` methods didn’t explicitly return a value via the `returned ` statement. So the rest of `then` methods in the chain get the value `undefined as their arguments.
But we can explicitly set a value to be sent to the next handler in the `then` methods.
Example: JavaScript Promise chain of then() method with explicit values
function exe(resolve, reject){
setTimeout(()=>{
resolve("Success");
},2000);
}
const prom = new Promise(exe);
prom.then(value=>{
console.log("The first resolved handler");
console.log(value);
return"Success from the first resolve handler";
},
failed=>{
console.log("The first failed handler");
console.log(failed);
return"Failed from the first rejection handler";
}).then(value=>{
console.log("The second resolved handler");
console.log(value);
return"Success from the second resolve handler";
},
failed=>{
console.log("The second failed handler");
console.log(failed);
return"Failed from the second rejection handler";
}).then(value=>{
console.log("The third resolved handler");
console.log(value);
return"Success from the third resolve handler";
},
failed=>{
console.log("The third failed handler");
console.log(failed);
return"Failed from the third rejection handler";
});
Output:
The first resolved handler Success The second resolved handler Success from the first resolve handler The third resolved handler Success from the second resolve handler
As you can see, all the `resolved` handlers of the `then` methods in the chain are called one after the other. Also, each handler has an argument that the last `resolved` handler sent to it.
Example: JavaScript Promise then() method with rejection handler
function exe(resolve, reject){
setTimeout(()=>{
reject("Failed");
},2000);
}
const prom = new Promise(exe);
prom.then(value=>{
console.log("The first resolved handler");
console.log(value);
},
failed=>{
console.log("The first failed handler");
console.log(failed);
}).then(value=>{
console.log("The second resolved handler");
console.log(value);
},
failed=>{
console.log("The second failed handler");
console.log(failed);
});
Output:
The first failed handler Failed The second resolved handler undefined
Note: by default, only the first rejection handler of the first `then` method will be called if the target promise failed. A rejection handler itself returns a resolved handler by default. That’s why the `resolved` handler of the second `then` method in the chain is called instead of the rejection handler.
Returning an Explicit Promise object from JavaScript Promise then() Method:
We can also explicitly define and return another `Promise` object in the body of the resolve or rejection handler of a `then` method. This way, the result of that promise defines which handler of the next `then` method in the chain should be called.
Example: returning an explicit promise object from JavaScript then() method
function exe(resolve, reject){
setTimeout(()=>{
reject("Failed");
},2000);
}
const prom = new Promise(exe);
prom.then(value=>{
console.log("The first resolved handler");
console.log(value);
},
failed=>{
console.log("The first failed handler");
console.log(failed)
return new Promise((resolve, reject)=>resolve("The second promise resolved"));
}).then(value=>{
console.log("The second resolved handler");
console.log(value);
},
failed=>{
console.log("The second failed handler");
console.log(failed);
});
Output:
The first failed handler Failed The second resolved handler The second promise resolved
