Javascript promises are a powerful tool for handling asynchronous operations. They provide a clean and easy-to-use interface for dealing with complex async code flows. In this article, we'll explore the basics of promises and take a deep dive into how they work under the hood.
What is a Promise?
A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It provides a mechanism for handling the result of an async operation without blocking the main thread.
Promises have three states:
- Pending: The initial state of a promise.
- Fulfilled: The state of a promise when it has successfully completed and returned a value.
- Rejected: The state of a promise when it has failed and returned an error.
Creating a Promise
To create a new promise, you can use the Promise constructor function:
const myPromise = new Promise((resolve, reject) => {
// your async code here
});The Promise constructor takes a single argument, which is a callback function that receives two arguments: resolve and reject. These are functions that you can call to change the state of the promise.
Inside the promise callback, you'll place your asynchronous code. When your code completes successfully, you call resolve with the result, and the promise will transition to the fulfilled state. If an error occurs, you call reject with the error message, and the promise will transition to the rejected state.
Here's an example of a simple promise that resolves after one second:
-- -------------------- ---- -------
----- --------- - --- ----------------- ------- -- -
------------- -- -
-------------- ---------
-- ------
---
----------------------- -- -
-------------------- -- ---- ------ ------- ----- --- ------
---Promise Chaining
Promises are often used in combination with each other for more complex async flows. This is known as "promise chaining".
When a promise is fulfilled, its then method is called with the result value as its argument. The then method returns a new promise that can be used for further chaining.
Here's an example of promise chaining:
const myPromise = new Promise((resolve, reject) => {
resolve(2);
});
myPromise
.then((result) => result * 2)
.then((result) => result * 3)
.then((result) => console.log(result)); // logs 12In this example, we start with a promise that resolves to the value 2. We then chain three then methods together, each of which multiplies the previous result by 2, resulting in a final value of 12.
Error Handling
When a promise is rejected, its catch method is called with the error message as its argument. You can use this to handle errors in your async code.
Here's an example of error handling:
const myPromise = new Promise((resolve, reject) => {
reject('Something went wrong');
});
myPromise
.then((result) => console.log(result))
.catch((error) => console.error(error)); // logs "Something went wrong"If you don't provide a catch method, any errors that occur inside your promise callback will be thrown and will need to be caught using traditional try/catch blocks.
Conclusion
Promises are a powerful tool for handling asynchronous operations in Javascript. They provide a clean and easy-to-use interface for dealing with complex async code flows.
By understanding the basics of promises and how they work under the hood, you can write more efficient and maintainable async code in your projects.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26934