理解 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 中的真")这一事实是否会改变行为?承诺是否要求所有返回值都是异步承诺以保持行为?

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?

推荐答案

您正在说明链接和分支之间的区别.链接将会对多个异步操作进行排序，以便在前一个操作完成时开始一个操作，您可以链接任意数量的项目以一个接一个地进行排序.

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).

深入了解如何使用 Promise 可能有助于理解这一点.

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

当你这样做时(场景 1 和 3):

When you do (scenarios 1 and 3):

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

发生的情况如下:

1. 解释器获取您的 p 变量，在其上找到 .then() 方法并调用它.
2. .then() 方法只存储它传递的回调，然后返回一个新的承诺对象.它此时不调用它的回调.这个新的 Promise 对象与原始的 Promise 对象和它存储的回调相关联.除非双方都满意，否则不会解决.
3. 然后调用新返回的 promise 上的第二个 .then() 处理程序.同样，该承诺上的 .then() 处理程序仅存储 .then() 回调，它们尚未执行.
4. 然后在未来的某个时候，原始承诺 p 由其自己的异步操作解析.当它被解析时，它会调用它存储的任何 resolve 处理程序.其中一个处理程序将是对上述链中第一个 .then() 处理程序的回调.如果该回调运行完成并返回任何内容或静态值(例如，不返回承诺本身)，那么它将解析它创建的承诺，以在 .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() 处理程序本身包含异步代码并返回承诺，这两个异步操作将同时进行(类似并行的行为)，而不是像场景 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屋！