我还在学习JavaScript Promise,我遇到了一个我不理解的行为.
var o = $("#output");
var w = function(s) {
o.append(s + "<br />");
}
var p = Promise.resolve().then(function() {
w(0);
}).then(function() {
w(1);
});
p.then(function() {
w(2);
return new Promise(function(r) {
w(3);
r();
}).then(function() {
w(4);
});
}).then(function() {
w(5);
});
p.then(function() {
w(6);
});Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>Run Code Online (Sandbox Code Playgroud)
我希望这些语句按顺序运行 - 也就是说,输出就是
0
1
2
3
4
5
6
Run Code Online (Sandbox Code Playgroud)
相反,输出是
0
1
2
3
6
4
5
Run Code Online (Sandbox Code Playgroud)
即使去除内在Promise也会给我带来矛盾的结果. 1之前输出2,但6之前输出5 …
为了理解ES6 promise的执行顺序,我注意到链接处理程序的执行顺序受前一个处理程序是返回值还是promise的影响.
例
let a = Promise.resolve();
a.then(v => Promise.resolve("A")).then(v => console.log(v));
a.then(v => "B").then(v => console.log(v));Run Code Online (Sandbox Code Playgroud)
直接在Chrome(v 61)控制台中运行时的输出:
B
A.
但是,当点击Run code snippet按钮时,我会收到订单A B.
是否在ES6中为上述示例定义了执行顺序,还是由实现决定?
如果定义了,那么正确的输出应该是什么?
var p1 = new Promise((resolve, reject) => {
resolve('p1');
});
var p2 = new Promise((resolve, reject) => {
resolve('p2');
});
Promise.all([
p1.finally(() => { console.log("p1 completed"); }),
p2.finally(() => { console.log("p2 completed"); }),
]).then(values => {
console.log(values[0]);
console.log(values[1]);
}).finally(() => {
console.log("all() completed");
Run Code Online (Sandbox Code Playgroud)
我想我只在网络上看到过结尾处有一个 .finally()的示例 [1]:https://i.stack.imgur.com/HeQV8.png