NodeJS中如何顺序处理Promise？forEach循环await报错解决

错误原因 #

你碰到的语法错误，是因为forEach的回调函数不是async函数——await只能在async函数或者模块顶层（Node.js 14.8及以上支持）里使用。另外，forEach本身就不支持异步等待，不管回调里写不写await，它都会一次性触发所有循环里的操作，根本不会等前一个Promise完成。

方案一：用for...of循环（最直观简单） #

把forEach换成for...of，同时确保这段代码在async函数内部执行，就能实现逐个顺序执行：

// 定义异步函数处理所有页面
async function processPages() {
  for (const page of test.pages) {
    await generate({      
      inline: false,
      base: './',
      src: url,
      dimensions: [
          {
            width: 576,
            height: 900
          }
      ],
      target: {
        css: page.fileName,
      },
      ignore: {
        atrule: ['@font-face'],      
      },
    });
  }
}

// 调用函数并处理可能的错误
processPages().catch(err => console.error('页面处理出错:', err));

for...of会等待每次循环里的await执行完成后，再进入下一次循环，完美满足你顺序执行的需求。

方案二：用reduce实现Promise链式调用 #

如果不想用for循环，也可以通过reduce把所有Promise串成链式调用，强制顺序执行：

test.pages.reduce((prevTask, page) => {
  return prevTask.then(() => {
    return generate({      
      inline: false,
      base: './',
      src: url,
      dimensions: [
          {
            width: 576,
            height: 900
          }
      ],
      target: {
        css: page.fileName,
      },
      ignore: {
        atrule: ['@font-face'],      
      },
    });
  });
}, Promise.resolve()) // 初始值为已完成的Promise
.catch(err => console.error('页面处理出错:', err));

这里用reduce从一个已完成的Promise开始，每次把下一个generate任务挂在上一个任务的then里，确保前一个完成后才执行下一个。

内容的提问来源于stack exchange，提问作者K V Sharma