理解javascript承诺;堆叠和链接 [英] Understanding javascript promises; stacks and chaining

问题描述

我遇到了一些javascript承诺的问题，尤其是堆叠链。

I've been running into a couple of problems with javascript promises, particularly with stacked chains.

任何人都可以向我解释这些不同实现之间的区别（如果有！）

Can anyone explain to me the difference (if there is any!) between these different implementations?

实施1

var serverSidePromiseChain;
serverSidePromiseChain = async().then(function(response) {
    console.log('1', response);
    return response;
}).then(function(response) {
    console.log('2', response);
    return true;
}).then(function(response) {
    console.log('3', response); // response expected to be 'true'
    return async3();
}).then(function(response) {
    console.log('4', response);
    return async4();
})

实施2

var serverSidePromiseChain;
serverSidePromiseChain = async().then(function(response) {
    console.log('1', response);
    return response;
});

serverSidePromiseChain.then(function(response) {
    console.log('2', response);
    return true;
})
serverSidePromiseChain.then(function(response) {
    console.log('3', response); // response expected to be 'true'
    return async3();
})
serverSidePromiseChain.then(function(response) {
    console.log('4', response);
    return async4();
})

实施3

var serverSidePromiseChain;
serverSidePromiseChain = async().then(function(response) {
    console.log('1', response);
    return response;
});

serverSidePromiseChain = serverSidePromiseChain.then(function(response) {
    console.log('2', response);
    return true;
})
serverSidePromiseChain = serverSidePromiseChain.then(function(response) {
    console.log('3', response); // response expected to be 'true'
    return async3();
})
serverSidePromiseChain = serverSidePromiseChain.then(function(response) {
    console.log('4', response);
    return async4();
})

链的一部分返回值（步骤2中为true）的事实是否会改变行为？承诺是否要求所有返回值都是异步承诺以保持行为？

Does the fact that part of the chain returns a value ('true' in step 2) change the behavior? Do promises require all returned values to be async promises to keep behavior?

推荐答案

您正在说明链接和分支之间的不同。链接wil序列多个异步操作，所以当前一个完成时开始，你可以链接任意数量的项目，一个接一个地排序。

You are illustrating the different between chaining and branching. Chaining wil sequence multiple async operations so one starts when the prior one finishes and you can chain an arbitrary number of items to sequence one after the other.

分支挂钩多个异步当一个触发操作完成时，所有操作都在同一时间。

Branching hooks up multiple async operations to all be in flight at the same time when one trigger operation completes.

实现1和3是相同的。他们被束缚住了。实现3只使用临时变量进行链接，而实现1直接使用 .then（）的返回值。执行没有区别。这些 .then（）处理程序将以串行方式调用。

Implementations 1 and 3 are the same. They are chained. Implementation 3 just uses a temporary variable to chain, whereas implementation 1 just uses the return value from .then() directly. No difference in execution. These .then() handlers will be called in serial fashion.

实现2不同。它是分支的，不是链式的。因为所有后续 .then（）处理程序都附加到完全相同的 serverSidePromiseChain 承诺，所以它们都只等待第一个承诺得到解决，然后所有后续的异步操作都在同一时间进行（不像其他两个选项那样连续）。

Implementation 2 is different. It is branched, not chained. Because all subsequent .then() handlers are attached to the exact same serverSidePromiseChain promise, they all wait only for the first promise to be resolved and then all subsequent async operations are all in flight at the same time (not serially as in the other two options).

理解这一点可能有助于将一个级别深入到承诺如何使用。

It may be helpful in understand this to dive one level down into how this works with promises.

当你这样做时（方案1和3）： / p>

When you do (scenarios 1 and 3):

p.then(...).then(...)

结果如下：

1. 翻译带你的 p 变量，在其上找到 .then（）方法并调用它。


2. .then（）方法只存储它传递的回调，然后返回一个新的promise对象。它此时不会调用它的回调。这个新的promise对象与原始的promise对象和它存储的回调相关联。在两者都满意之前它不会解决。


3. 然后调用新返回的promise的第二个 .then（）处理程序。同样，该承诺上的 .then（）处理程序只存储 .then（）回调并且它们还没有执行。


4. 然后在将来的某个时间，原始承诺 p 将通过自己的异步操作得到解决。解决之后，它会调用它存储的任何 resolve 处理程序。其中一个处理程序将是上述链中第一个 .then（）处理程序的回调。如果该回调运行完成并返回任何内容或静态值（例如，不返回promise本身），那么它将解析它创建的承诺，以便在 .then（）。当该承诺得到解决后，它将调用由上面的第二个 .then（）处理程序安装的解析处理程序，依此类推。



1. The interpreter takes your p variable, finds the .then() method on it and calls it.
2. The .then() method just stores the callback it was passed and then returns a new promise object. It does not call its callback at this time. This new promise object is tied to both the original promise object and to the callback that it stored. It will not resolve until both are satisfied.
3. Then the second .then() handler on that newly returned promise is called. Again, the .then() handler on that promise just stores the .then() callbacks and they are not yet executed.
4. Then sometime in the future, the original promise p gets resolved by its own async operation. When it gets resolved, it then calls any resolve handlers that it stores. One of those handlers will be the callback to the first .then() handler in the above chain. If that callback runs to completion and returns either nothing or a static value (e.g. doesn't return a promise itself), then it will resolve the promise that it created to return after .then() was first called. When that promise is resolved, it will then call the resolve handlers installed by the second .then() handler above and so on.

当你这样做时（方案2）：

When you do this (scenario 2):

p.then();
p.then();

一个承诺 p 这里有存储的决心来自 .then（）调用的处理程序。当原始承诺 p 得到解决后，它将同时调用 .then（）处理程序。如果 .then（）处理程序本身包含异步代码并返回promises，则这两个异步操作将同时处于飞行状态（类似并行行为），而不是按顺序如方案1和3所示。

The one promise p here has stored resolve handlers from both the .then() calls. When that original promise p is resolved, it will call both of the .then() handlers. If the .then() handlers themselves contain async code and return promises, these two async operations will be in flight at the same time (parallel-like behavior), not in sequence as in scenario 1 and 3.

这篇关于理解javascript承诺;堆叠和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！