In-depth understanding of js promise chain

The new standard adds native Promise.

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

1. 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, then this callback will only be called when Promise resolve() .

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

catch() specifically handles the Promise reject() situation.

In other words, then() can be used both ways, and catch() can only handle reject(). However, it is recommended to use then() to handle resolve() and catch() to handle reject().

2. However, what I want to talk about is not the above. The above is just a review of the basic usage. Here we will start with the details of the return values and chain usage of then() and the then() method.

Then the official documentation says that both then() and catch() return a promise, which is very intriguing. (I am a newbie in JS, and I have never been exposed to previous promises in the wild).

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 how then() is used.

First explain the situation of then(): (catch is similar)

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

Note: The above task1 and task2 are both callbacks.

Here, p1 is a created Promise and 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, and what about p3?

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

in,

1. An 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 represents calling the then function.

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

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

6. The call of the then function will not block, that is, p2 and p3 are generated almost instantly, even if p1 is still slowly migrating its own state.

We know that the state of p1 is resolved (see the code above). However, it has not been explained here how the states of p2 and p3 change, is it resolved or rejected? Look at the new picture below.

You can see more diamonds.

The diamond represents the callback function passed in when then is called. The upward rhombus represents the process of being passed in [resolved for the previous Promise object], and the downward rhombus represents the process of being passed in [rejected for the previous Promise object].

Note: In this example, no processing for reject is passed in, that is, the downward diamond should not be drawn in the picture above. For the sake of convenience, we only need to know that the upward and downward diamond is related to how we use then or catch. Let's take a look at the sample code again:

 var p1 = Promise.resolve("Success");var p2 = p1.then(task1);//The upward rhombus is generated var p3 = p2.then(task2);//The upward rhombus is generated

It can be seen that we do not give the second parameter of then, that is, we do not handle reject.

To add, if you want to deal with reject, you can use then or catch. catch is specially used to deal with reject. Apart from that, there is no difference between then.

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

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

3. Pass on like this.

4. This article does not explain how to obtain the last Promise final data in the callback, that is, how to pass the data, there are many tutorials.

3. Here are some examples to summarize this article.

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

The above are four independent examples, with no connection between them.

X means that P3 does not use the then or catch function, so there is no way to deal with resolution or reject.

Finally, if there is any error, please correct me in time, thank you! ~! ! @~~~

The above article in-depth understanding of js promise chain is all the content I have shared with you. I hope it can give you a reference and I hope you can support Wulin.com more.