这段promise代码为什么输出结果是这样的？

Question

var ps = [
    () => new Promise(resolve => setTimeout(() => {
        console.log('exec 1');
        resolve('first timeout done')
    }, 1000)),

    () => new Promise(resolve => setTimeout(() => {
        console.log('exec 2');
        resolve('second timeout done')
    }, 3000)),
]

ps.reduce((acc, ele) => {
    acc.then((res) => {
        console.log('res', res)
        return ele()
    })
    return acc
}, Promise.resolve('start'))

/* output */
//res start
//res start
//exec 1
//exec 2

这段代码让我疑惑的是为什么res start输出了两次，不应该有一次是输出first timeout done吗？输出结果按理和这下面的一致。

Promise.resolve('start')
    .then((res) => {
        console.log(res);
        return ps[0]()
    })
    .then(res => {
        console.log(res);
        return ps[1]()
    })
/* output */
//start
//exec 1
//first timeout done
//exec 2

如果我提问不清晰可以再问哈

Answer 1

关键点在于reduce里return的是什么，如果你里面return的是acc.then，那么结果正是你预期的那样，因为acc.then每次都会生成一个新的Promise，他的值承接上一个，而你return的每次都是acc，他的值是固定的start