Understanding Promises and .then(), .catch()
A promise is a built-in object in JavaScript programming that displays the successful termination or failure result of a particular program asynchronous operation in a JavaScript program. Promises provide JavaScript programmers with callback features for asynchronous task management, and support advanced program error management and chaining features in a program.
A promise in JavaScript programming can perform in three states.
- Pending Promise – It displays the program operation pending in the initial stage of the promise in a JavaScript program.
- Fulfilled Promise – It displays the result value of the current promise when the promise operation in the current program has been successfully completed.
- Rejected Promise – The promise operation in a JavaScript program has been unsuccessful, and a program error may occur due to the unsuccessful fulfilment of the promise in the program.
Creating a Promise in a JavaScript program.
A promise is created by applying a new Promise() constructor function to the current JavaScript program, which inputs a callback function in the current program as an argument. Here the callback function for promise automatically inputs two parameters as arguments by default.
The elements of the promise.
- Resolve() function – Resolve is a built-in function that is called in the program when an asynchronous program task is successful. This process converts the promise status from “pending” to “completed” in the current program
- Reject() function – This is also a built-in function that is called when an asynchronous task is unsuccessful in the current program. It converts the promise status from “pending” to “rejected” in the current program.
Example of promise in JavaScript program.
const testpromise = new Promise((resolve, reject) => {
let trial = true; // let success declare here as true
if (trial) {
resolve(“Promise operation is successfully done”);
} else {
reject(“promise operation is failed”);
}
});
Here in this program example.
If trial is true, then the program displays the promise message “Promise operation is successfully done”.
If trial is false, then the program rejects the promise operation with the promise message “promise operation is failed”.
.then(), .catch(), and .finally() operations in JavaScript.
Once the promise is created in a JavaScript program, programmers can manage or control the result or error of the promise by applying promise methods like .then(), .catch(), and .finally().
.then() function in JavaScript programs.
The .then() method in JavaScript programs is used to apply or define what happens when a promise completion solution occurs in the current program. The program inputs a callback function as an argument, which is executed when the promise is successful in the program.
JavaScript programmers can also apply multiple .then() calls in series to manage asynchronous program operations.
The syntax of the .then() function.
promise.then(onFulfilled, onRejected);
- onFulfilled – This is a built-in function that is called when the promise condition is fulfilled in the current program.
- onRejected (optional) – This is a built-in function that is called when the promise condition is unsuccessful in the current program.
Example of JavaScript .then() function.
testPromise
.then(output => {
console.log(output); // it display result when condition fulfil
})
.catch(error => {
console.log(error); // it display error when promise is rejected
});
.catch() function in JavaScript.
In JavaScript programs, the .catch() method is used to apply or define what happens when a promise is rejected in the current program. The catch function only manages and controls program errors in the current program, and the catch function should be applied only in error management in the current program. Programmers can apply the .catch() function in series after .then() to catch any program error that occurs in the current program.
The syntax of the .catch() function.
promise.catch(onRejected);
onRejected – This is a built-in function which is called when the promise is rejected in the current program.
Example of .catch() function.
testPromise
.then(output => {
console.log(output); // it display the result when condition complete Logs
})
.catch(error => {
console.log(error); // it display the error when premise is rejected
});
Here in this catch program example.
In this program if the promise is completed then the result will be logged to the screen.
If the promise is rejected in the current program then the error message will be displayed and logged.
.finally() function in JavaScript.
The .finally() function method in a JavaScript program is called in the program when the promise task is completed or rejected in a program, whatever the program output result is. The .finally() function is generally used in task clean-up tasks such as stopping the loading spinner, closing the database connection, etc. Because it is executed after the promise task is completed or rejected in the program.
Syntax of the .finally() function.
promise.finally(() => {
console.log(“it is run after promise task is success or reject”);
});
Here in this program, the .finally() function does not display the result or error of the promise, it is executed only when the promise is completed in the program.
Example of .finally() function in JavaScript.
testPromise
.then(output => {
console.log(output); // it display result when the condition fulfilled
})
.catch(error => {
console.log(error); // it display the error when it rejected
})
.finally(() => {
console.log(“here finally run when above result or reject condition done.”);
});
Summary of .then(), .catch(), and .finally() function methods in JavaScript.
- .then() method – It manages the success result completion of a promise in the current program. Programmers can apply .then() function calls in a chain or series for multiple asynchronous operations in the program.
- .catch() method – It manages the error rejected situation in the chain of a promise in the current program. It catches errors that occur in previously applied .then() method calls or fundamental promises.
- .finally() method – It executes the program source code after the promise in the current program is completed or rejected. It is important for clean-up activities in program operation.
Conclusion of the .then(), .catch(), and .finally() function.
Promises in JavaScript programming provide a more structured and readable method of managing and controlling asynchronous program operations than callback functions. By applying .then(), .catch(), and .finally() functions in JavaScript programs, programmers can manage program success, errors, and task clean-up program activities in a much clearer and more maintainable way, especially when the programmer is dealing with many asynchronous program tasks in a program.
