Why we use then() method in JavaScript ?

The then() method in JavaScript is used with promises to handle asynchronous operations. It accepts two callback functions: one for handling a promise’s resolved value and one for handling its rejection. It returns a new promise, allowing for method chaining.

Why we use then() method

• Handle Results: then() processes promise outcomes, allowing actions based on successful resolution or errors.
• Callback Functions: Provides callbacks for success and failure, ensuring proper handling of asynchronous tasks.
• Method Chaining: Enables chaining multiple then() calls for sequential asynchronous operations, simplifying code readability and flow.

Syntax

demo().then(
    (onResolved) => {
        // Some task on success
    },
    (onRejected) => {
        // Some task on failure
    }
)
Note: demo is a function that returns a promise prototype.

Parameters:

• onFulfilled: This is a function that is called upon to the success of the promise. This is an optional parameter.
• onRejected: This is a function that is called upon the rejection of the promise. This is an optional parameter.

Return Value: This method can either return a Promise (if further another then() is called) or nothing.

Example 1: In this example, we have not passed any arguments.

function demo() {
    console.log("Function called!!<br>")
    return Promise.resolve("Success");
    // or
    // return Promise.reject("Failure");
}
demo().then()

 Output: 

Function called!!

Example 2: In this example, we are Passing only the first callback.

function demo() {
    console.log("Function called!!")
    return Promise.resolve("Success");
    // or
    // return Promise.reject("Failure");
}
demo().then(
    (message) => {
        console.log("Then success:" + message);
    }
)

Output: 

Function called!!
Then success:Success

Note: If the demo function returns a reject then it will generate an error.

Example 3: In this example, we are Passing both the arguments.

function demo() {
    console.log("Function called!!")
    return Promise.resolve("Success");
    // or
    // return Promise.reject("Failure");
}
demo().then(
    (message) => {
        console.log("Then success:" + message);
    },
    (message) => {
        console.log("Then failure:" + message);
    }
)

 Output: 

Function called!!
Then success:Success

Example 4: In this example, we are using Chaining Multiple then() methods. Each then() can return a promise (a resolve or a reject) and therefore multiple then() methods can be chained together.

function demo() {
    console.log("Function called!!")
    return Promise.resolve(1);
    // or
    // return Promise.reject("Failure");
}
demo().then(
    (value) => {
        console.log(value);
    return ++value;
    },
    (message) => {
        console.log(message);
    }
    ).then(
    (value) => {
        console.log(value);
    },
    (message) => {
        console.log(message);
    }
)

 Output: 

Function called!!
12 

Example 5: In this example, we are using then() as an asynchronous function.

let demo = new Promise((resolve, reject) => {
    resolve(1);
})
let call = demo.then(
    (value) => {
        console.log(value);
        return ++value;
    },
    (message) => {
        console.log(message);
    });
    console.log(call);
    setTimeout(() => {
    console.log(call);
});

Output: 

Promise {status: "pending"}
1
Promise {status: "resolved", result: 2}

Supported Browsers:

• Google Chrome
• Edge 
• Firefox
• Opera
• Safari