Promise then() 方法没有按预期触发？

Question

在下面的代码中，我希望mark-1在mark-2. 我猜，我不使用await和async正确的一些地方。

我很确定这一行：

  const things = await fs.promises.readdir(folder);

和这条线

  const stats = await fs.promises.stat(path);

是正确的，因为我们正在等待文件系统响应。

到目前为止，我并不关心错误检查或跨平台代码，只是让承诺正常工作

// Libraries

const fs = require('fs');

// API

getThings('_t/').then(() => {

  console.log('mark-2')

})

// Accesses the file system and returns an array of files / folders

async function getThings (folder) {

  const things = await fs.promises.readdir(folder);

  things.forEach(async (thing)=>{

    await getStats(thing, folder);

  });

}

// Gets statistics for each file/folder

async function getStats (thing, folder) {

  const path = folder + thing;

  const stats = await fs.promises.stat(path);

  console.log('mark-1');

}

Answer 1

问题是，你正在使用async，并await在forEach通话，而这也不行，你期望的那样。该forEach方法并不真正关心回调函数的返回值（在本例中是getStats返回的 promise ）。你应该承诺map的things数组，并使用Promise.all：async function getThings (folder) {  const things = await fs.promises.readdir(folder);  const promises = things.map(thing =>  getStats(thing, folder));  return await Promise.all(promises);}请注意，这将“并行”执行承诺，而不是按顺序执行。如果您想一个接一个地依次执行承诺，您可以“减少”承诺数组，或者使用传统的循环 ( for, for-of)。编辑：让我试着澄清为什么在 forEach 中使用异步回调函数不起作用。尝试#1：脱糖：在最初的例子中，我们有这样的事情：// ...things.forEach(async (thing)=>{  await getStats(thing, folder);});// ...如果我们将回调与 分开forEach，我们有：const callback = async (thing)=>{    await getStats(thing, folder);};things.forEach(callback);如果我们“脱糖”异步函数：const callback = function (thing) {  return new Promise((resolve, reject) => {    try {      getStats(thing, folder).then(stat => /*do nothing*/);    } catch (err) {      reject(err);    }    resolve();  });};things.forEach(callback);将函数标记为async确保函数将始终返回一个承诺，无论其完成，如果函数在没有明确返回值的情况下执行，承诺将被解析undefined，如果它返回某个值，承诺将解析为它，最后，如果函数中的某些东西抛出，承诺将被拒绝。正如您所看到的，问题在于承诺没有被任何东西等待，而且它们也没有解决任何价值。放置在回调中的 await 实际上对值没有任何作用，就像上面我正在做的.then那样，对值没有做任何事情。尝试 2：实现一个简单的forEach函数：function forEach(array, callback) {  for(const value of array) {    callback(value);  }}const values = [ 'a', 'b', 'c' ];forEach(values, (item) => {  console.log(item)});上面的 forEach 是对Array.prototype.forEach方法的过度简化，只是为了展示它的结构，实际上调用回调函数是传递数组作为this值，传递三个参数，当前元素，当前索引，再次是数组实例，但是我们明白了。如果我们想实现一个async forEach函数，我们必须等待回调调用：const sleep = (time, value) => new Promise(resolve => setTimeout(resolve(value), time));const values = [ { time: 300, value: 'a'}, { time: 200, value: 'b' }, {time: 100, value: 'c' } ];async function forEachAsync(array, callback) {  for(const value of array) {    await callback(value);  }}(async () => {  await forEachAsync(values, async (item) => {    console.log(await sleep(item.time, item.value))  });    console.log('done');  })()上面的forEachAsync函数将逐项迭代和等待，通常你不希望那样，如果异步函数是独立的，它们可以并行完成，就像我首先建议的那样。const sleep = (time, value) => new Promise(resolve => setTimeout(resolve(value), time));const values = [ { time: 300, value: 'a'}, { time: 200, value: 'b' }, {time: 100, value: 'c' } ];(async () => {  const promises = values.map(item  => sleep(item.time, item.value));  const result = await Promise.all(promises);  console.log(result);})()正如您所看到的，即使 Promise 是并行执行的，我们也会以与数组中的 Promise 相同的顺序获得结果。但是这个例子和第一个的区别是这个只需要300ms（最长的promise解析），第一个需要600ms（300ms + 200ms + 100ms）。希望它使它更清楚。