如何使用 Array.reduce() 在给定的 JavaScript 代码中解析 Promise？

Question

请参考以下JavaScript代码：

var arr = [30, 40, 10, 50, 20];
var fun = function(n) {
  console.log("Before Promise => n: " + n);
  return new Promise(resolve => {
    console.log("After Promise => n: " + n);
    setTimeout(() => {
      console.log("Promise Resolved => n: " + n);
      resolve(0);
    }, n * 30);
  });
}
arr.reduce((p, v) => p.then(fun(v)), Promise.resolve(0));

1.如果我错了请指正Array.reduce()将上面的内容减少为以下Promise链：

Promise.resolve(0).then(fun(30)).then(fun(40)).then(fun(10)).then(fun(50)).then(fun(20)).

2.为什么输出不是如下：

Promise Resolved => n: 30
Promise Resolved => n: 40
Promise Resolved => n: 10
Promise Resolved => n: 50
Promise Resolved => n: 20

3. 如果我用固定时间更改 n*30 为什么输出如上所示 500 ?

Answer 1

.then 接受一个函数作为参数，但是你在做：

p.then(fun(v))

这会立即fun 调用，无需等待p 解析，并将返回的Promise 传递给.then。就像做

Promise.then(Promise.resolve(6))
         //  ^^^ but .then only accepts a function as a parameter

这没有意义。

更改为回调，调用时会调用 fun 和 returns fun 的 Promise：

var arr = [30, 40, 10, 50, 20];
var fun = function(n) {
    console.log("Before Promise => n: " + n);
    return new Promise(resolve => {
        console.log("After Promise => n: " + n);
        setTimeout(() => {
            console.log("Promise Resolved => n: " + n);
            resolve(0);
        }, n*30);
    });
}
arr.reduce((p, v) => p.then(() => fun(v)), Promise.resolve(0));
//                          ^^^^^^

Answer 2

Array.reduce() will reduce the above as following Promise chain

是的。

Why the output is not as expected?

因为承诺“链条”断了。为了正确链接，您需要将回调函数传递给 then:

Promise.resolve(0).then(() => fun(30)).then(() => fun(40)).then(() => fun(10)).then(() => fun(50)).then(() => fun(20));
//                      ^^^^^               ^^^^^               ^^^^^               ^^^^^               ^^^^^

在你的减速器中做同样的事情：

arr.reduce((p, v) => p.then(() => fun(v)), Promise.resolve(0));

如何使用 Array.reduce() 在给定的 JavaScript 代码中解析 Promise？

How the Promise is resolved in given JavaScript code using Array.reduce()?

javascript

es6-promise