Deep understanding of JS promise Chain_javascript Skills

The new standard adds to the promise of the native.

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

A review of then () and catch ()

Then () and catch () parameters can be placed in the callback function to receive a promise final result.

Then () can receive an argument, the callback is invoked only when Promise resolve ().

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

catch () specifically handles the case of Promise reject ().

That is, then () can be used concurrently, and catch () only handles the case of reject (). However, it is recommended that then () be used to process resolve (), catch () processing reject ().

Two, however, I will not talk about the above things, the above is just a review of basic usage. This starts with the details of the return value and chained usage of then () and catch ().

So the official document says then () and catch () all return to a Promise, which is intriguing. (I am a novice, the former opposition promise I have not contacted).

First of all, this newly returned Promise is not the original Promise;

Second, the change in the state of the newly returned Promise (resolve) or reject (). ) is related to the state of the previous Promise and the way in which then () is used.

Description of then () First: (Catch similar)

var P1 = promise.resolve ("Success");
var P2 = p1.then (task1);
var p3 = P2.then (TASK2);

Note: The Task1 and Task2 above are all callback.

Here, the P1 is a created Promise, and the direct resolve ();

P2 is a Promise obtained with then (), and P3 is a then obtained by Promise ().

So how does the state of P2 change, p3?

I'm going to use the following picture to explain this concept:

which

1. The eight-side shape represents a Promise object.

2. The circle represents a promise internal state, and a black arrow represents a state change.

3. The arrow to the right represents the call to the then function.

4. In other words, a new Promise object is generated whenever the then function is invoked.

5. When calling the then function, do not know what the state of the previous Promise object is, is pending or settled? This cannot be assumed and is not visible outside.

6. The invocation of the then function is not blocked, that is, almost instantaneously P2 and P3 are generated, even though P1 is slowly migrating its own state.

We know that the state of the P1 is being resolve (see the code above). However, here has not explained how the state of white P2 and P3 change, is resolve or reject? Look at the new picture below.

You can see a lot of diamonds.

The diamond represents the callback function that is passed in when the then is invoked. The up diamond represents the processing that was resolve for the previous Promise object, and the down diamond represents the "reject for the previous Promise object" process.

Note: In this example, there is no processing for reject, which means that the downward diamond should not be drawn in the image above, for the convenience of drawing, only the diamonds that know the upward downward are related to how we use then or catch. Look at the sample code again:

var p1 = promise.resolve ("Success"); var p2 = p1.then (TASK1);//generates the upward diamond var p3 = P2.then (TASK2);//produces a diamond up

As we can see, the second parameter of then is not given, that is, we did not deal with reject.

Add that if you want to process reject you can use then, or you can use Catch,catch specifically to handle reject, there is no difference from then.

1. If the final state of the P1 (resolve or reject) is handled correctly (when the then is invoked, the corresponding callback is passed in, which is the corresponding diamond), then the P2 state is converted to resolve.

2. If the final state of the P1 (resolve or reject) is not properly handled (when the then is called, the corresponding callback is missing, which is the absence of the corresponding diamond), then the P1 state is routed to the P2 (receiving the status of the P1).

3. So passed on.

4. This article does not explain how to get the last Promise final data in callback, that is to say, how the data is delivered, this has a lot of tutorials.

Three, the following gives some examples to summarize the article.

The state of the P1 in the graph is given, resolve or reject, all of which are given by themselves. The goal is to launch the final state of P2 and P3.

These are four separate examples, and there is no link between them.

X means that P3 does not use then or catch functions, and does not talk about resolve or reject processing.

Finally, if there is a mistake, please correct me, thank you! ~!! @~~~

The above in-depth understanding of JS promise Chain is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.