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

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

请参考以下 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时，为什么输出还是如上所述？

解决方法

.then接受一个函数作为参数，但是您正在这样做：

p.then(fun(v))

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

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

那没有道理。

更改为回调，该回调在调用时会调用fun并返回fun的承诺：

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));
//                          ^^^^^^

,

Array.reduce()将减少上述承诺链的数量

是的

为什么输出不符合预期？

因为诺言“链”被打破。为了正确链接，您需要将回调函数传递给then：

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

在减速器中执行相同操作：

arr.reduce((p,Promise.resolve(0));