Deep understanding of js promise chain and promisechain

Deep understanding of js promise chain and promisechain

Native Promise is added to the new standard.

Here we will only discuss the use of the chain, and think about the details.

I. Review of then () and catch ()

The callback function can be placed in the parameters of then () and catch () to receive the final result of a Promise.

Then () can receive a parameter, so this callback will only be called during Promise resolve.

Then () can also receive the second parameter, so the second callback is used to handle the situation of Promise reject.

Catch () is used to handle Promise reject.

That is to say, then () can be used simultaneously, while catch () can only handle reject. However, we recommend that you use then () to process resolve () and catch () to process reject ().

II. However, what I want to talk about is not the above. The above is just a review of the basic usage. The following describes the return values and chained usage of then () and catch.

According to the official document, both then () and catch () return a Promise, which is intriguing. (I am a newbie to js. I have never touched any previous promise in the wild ).

First, the newly returned Promise is not the original Promise;

Second, the status of the newly returned Promise changes (resolve (); or reject .) Keep up with the status of a Promise and the usage of then.

First describe then (): (catch is similar)

var p1 = Promise.resolve("Success");var p2 = p1.then(task1);var p3 = p2.then(task2);

Note: Task 1 and Task 2 are both callback.

Here, p1 is a created Promise and directly resolve;

P2 is a Promise obtained using then (), and p3 is also a Promise obtained using then.

So how does p2 state change? What about p3?

I am going to explain this concept:

 

Where,

1. The Octagon represents a Promise object.

2. The circle represents the State inside a Promise, and the black arrow represents the state change.

3. The right arrow indicates that the then function is called.

4. That is, a new Promise object will be generated when the then function is called.

5. When calling the then function, I don't know what the status of the previous Promise object is, is it pending or settled? This cannot be assumed to be invisible to the outside world.

6. The call of the then function will not be blocked. That is to say, p2 and p3 are generated almost instantly, even if p1 is still slowly migrating its own State.

 

We know that the p1 status is resolve (see the above Code ). However, it does not show how the status of white p2 and p3 changes. Is it resolve or reject? See the new figure below.

You can see that the diamond is added.

Diamond indicates the callback function that is passed in when then is called. The upper diamond indicates that the previous Promise object is resolve, and the lower diamond indicates that the previous Promise object is reject.

Note: In this example, the reject processing is not passed in. That is to say, the downward diamond should not be drawn, which is shown here for convenience, you only need to know how to use then or catch the diamond up and down. Let's look at the sample code:

Var p1 = Promise. resolve ("Success"); var p2 = p1.then (task1); // generate the upward diamond var p3 = p2.then (task2); // generate the upward Diamond

We can see that we didn't give the second parameter of then, that is, we didn't process reject.

In addition, if you want to process reject, you can use then or catch. catch is specifically used to process reject, which is no different from then.

1. if the final state (resolve or reject) of p1 is correctly processed (when then is called, the corresponding callback is passed in, that is, there is a corresponding diamond, the p2 status will be changed to resolve.

2. if the final state (resolve or reject) of p1 is not correctly processed (when then is called, the corresponding callback is missing, that is, there is no corresponding diamond ), the status of p1 is routed to p2 (receiving the status of p1 ).

3. Pass it on.

4. This article does not explain how to obtain the final data of the previous Promise in callback. That is to say, there are many tutorials on how to transmit the data.

3. Some examples are provided below to summarize this article.

In the figure, the status of P1 is given. resolve or reject is given by itself. The goal is to launch the final status of P2 and P3.

The above are four independent examples with no connection.

X indicates that P3 does not use the then or catch function, so it cannot talk about resolve or reject processing.

Finally, if any error occurs, please correct it in time. Thank you !~!! @~~~

The above in-depth understanding of the js promise chain is all the content shared by the editor. I hope to give you a reference and support for the help house.