使用 reduce 和 await 会有不同的结果

Question

我有一个带异步函数的reduce和另一个不带异步函数的reduce，给同样的参数，结果却不一样，我不明白为什么。

不带异步的例子:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

const listOfMonths = [
  "2020-01",
  "2020-02",
  "2020-03",
  "2020-04",
  "2020-05",
  "2020-06"
];

const reduceWithoutAsync = listOfMonths.reduce(
        (previousKpis, curr, index) => {
          return {
            ...previousKpis,
            [curr]: "Hello Mars"
          };
        },
        {}
      );
      
output(JSON.stringify(reduceWithoutAsync, null, 4))

有 async:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

const listOfMonths = [
  "2020-01",
  "2020-02",
  "2020-03",
  "2020-04",
  "2020-05",
  "2020-06"
];

listOfMonths.reduce(async (previousKpis, curr, index) => {
  return Promise.resolve({
           ...previousKpis,
           [curr]: await Promise.resolve("hello Mars")
         });
    },
  Promise.resolve({})
).then(result => output(JSON.stringify(result, null, 4)));
      

为什么我使用async的时候只有最后一个元素？

Answer 1

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

const listOfMonths = [
  "2020-01",
  "2020-02",
  "2020-03",
  "2020-04",
  "2020-05",
  "2020-06"
];

listOfMonths.reduce((previousKpis, curr, index) => (
        previousKpis.then(async prev => ({
            ...prev,
            [curr]: await Promise.resolve("hello Mars")
        }))
    ),
    Promise.resolve({})
).then(result => output(JSON.stringify(result, null, 4)));
      

previousKpis是一个Promise，所以你需要要么把它作为一个Promise，要么把它作为一个Promise。await 它或使用 then 就像我的例子一样。那么一切都应该是好的

Answer 2

添加 const previousKpis = await previousKpis 前的返回语句。

你提供的每一个函数reduce都是一个async函数，这意味着它返回一个承诺。即使你在该承诺中调用return，你仍然需要等待它。我相信，你是在解析之前传播了 previousKpis。