JS Promise Chain

The new standard adds to native promise. This is just a case of chained use, think about the details. One, review of then () and catch ()

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

Then () can receive a parameter, then this callback will only be called when Promise Resolve ().

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

catch () specifically deals with the case of Promise reject ().

That is, then () can be used concurrently, catch () can only handle the case of reject (). However, it is recommended to use then () to handle resolve (), catch () to handle reject ().

TwoHowever, I am not going to talk about the above things, just review the basic usage. Here we begin to talk about the return values of then () and catch () and the details of the chained usage .

then the official document says then () and catch () all return a Promise, this argument is very interesting. (I am a new JS novice, the former opposition promise I have not contacted).

first, the 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 way that a Promise state and then () are used.

First explain then (): (Catch similar)

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

Note: The above Task1 and Task2 are callback.

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

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

So how does the state of P2 change, p3?

I'm going to explain this concept:

which

1. A eight-edged shape represents a promise object.

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

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

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

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

6. Then the call of the function is not blocked, that is, almost instantaneous P2 and P3 is generated, even though P1 is slowly migrating its own state.

We know that the state of P1 is being resolve (see the code above). However, there is no explanation of how the state of white P2 and P3 changed, is it resolve or reject? Look at the new picture below.

You can see more diamonds.

The diamond represents the callback function that is passed in when it is called. The upward diamond represents the "resolve" process for the previous Promise object, and the downward diamond represents the "reject for the previous Promise object" processing.

Note: This example does not pass in the processing for reject, that is, should not draw a downward diamond, here for the convenience of drawing, only to know the upward downward diamond with how we specifically use then or catch related. Look at the sample code again:

var p1 = promise.resolve ("Success"); var p2 = p1.then (TASK1);//Generate Upward Diamond var p3 = P2.then (TASK2);//produce upward diamond

As can be seen, then the second parameter we did not give, that is, we did not deal with the situation of reject.

To add, if you want to handle reject can use then, you can also use Catch,catch specifically to handle reject, in addition, and then no difference.

1. If the final state of the P1 (resolve or reject) is handled correctly (when called then, the corresponding callback is passed, that is, there is a corresponding diamond), then the P2 state will be converted to resolve.

2. If the final state of the P1 (resolve or reject) is not processed correctly (when the corresponding callback is missing, that is, there is no corresponding diamond), then the P1 state is routed to the P2 (receiving the P1 state).

3. So pass on.

4. This article does not explain, how to obtain the last Promise final data in the callback, that is, how the data passes, this has many tutorials.

Three, here are some examples to summarize this article.

The state of the P1 in the figure is given, resolve, or reject. The aim is to introduce the final state of P2 and P3.

The above are four separate examples, which are not linked to each other.

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

Finally, if there are errors, please correct me, thank you! ~!! @~~~

JS Promise Chain