In-depth understanding of js promise chain_javascript techniques-JS Tutorial-php.cn

In-depth understanding of js promise chain_javascript techniques

WBOY

Release： 2016-05-16 15:02:04

Original

1424 people have browsed it

The new standard adds native Promise.

Here we 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, then the second callback is used to handle the Promise reject() situation.

catch() specifically handles Promise reject() situations.

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

Second, however, what I want to talk about is not the above. The above is just to review the basic usage. Here we start to talk about the return values of then() and catch() and the details of chain usage.

Then the official documentation says that both then() and catch() return a Promise, which is very intriguing. (I am new to js, and I have never been exposed to promises in the wild before).

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

Second, the change in the status of this newly returned Promise (whether it is resolve() or reject().) is related to the status of the previous Promise and the way then() is used.

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

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

Copy after login

Note: The above task1 and task2 are both callbacks.

Here, p1 is a created Promise and resolved() directly;

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

So how does the status of p2 change? What about p3?

I am going to use the following picture to explain this concept:

Among them,

1. The octagon represents a Promise object.

2. The circle represents the internal state of a Promise, and the black arrow represents state changes.

3. The right arrow represents calling the then function.

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

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 and cannot be seen from the outside world.

6. The call of the then function will not block, 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 status of p1 is resolved (see the code above). However, it has not been explained here how the status of p2 and p3 changes. Is it resolved or rejected? Check out the new image below.

You can see more diamond shapes.

The diamond represents the callback function passed in when calling then. The upward diamond represents the incoming processing [for the previous Promise object that was resolved], and the downward diamond represents the incoming processing [for the previous Promise object that was rejected].

Note: In this example, there is no rejection processing. That is to say, the downward rhombus should not be drawn in the above picture. It is drawn here for convenience. We only need to know that the upward and downward rhombus is specific to us. How to use then or catch. Take another look at the sample code:

<span>var</span> p1 = Promise.resolve("Success"<span>);</span><span>var</span> p2 =<span> p1.then(task1);//产生了向上的菱形</span><span>var</span> p3 = p2.then(task2);//产生了向上的菱形

Copy after login

可以看出，then 的第二個參數我們沒有給出，也就是我們沒有處理 reject 的情況。

補充一句，如果想要處理 reject 可以使用 then ，也可以使用 catch，catch專門用來處理 reject ，除此之外，和 then 沒有區別。

1. 如果 p1 的最終狀態（resolve 或 reject）被正確處理（當呼叫 then 時，傳入了對應的 callback，也就是有對應的菱形）了，那麼 p2 的狀態就會轉為 resolve。

2. 如果p1 的最終狀態（resolve 或reject）沒有被正確處理（調用then 時，缺少了對應的callback，也就是沒有對應的菱形），那麼p1 的狀態就會路由到p2（接收p1的狀態）.

3. 如此傳遞下去。

4. 本文不講解，如何在 callback 取得上一個 Promise 最終數據，也就是說，數據如何傳遞，這個有很多教程了。

三，以下舉一些例子來總結本文。