NextJS API路由中async函数内使用await报错的原因与解决

你遇到的问题核心是：GET函数标记为async只代表它自身可以使用await，但内部嵌套的map回调函数并没有被声明为async，await只能在自身是async的函数内部使用，和外层函数是否为async无关。

错误原因 #

data.map((item, index) => { ... })里的箭头函数是独立的普通函数，没有标记async，所以在它内部使用await会触发语法错误。另外，就算给这个箭头函数加上async，map本身也不会自动等待每个异步操作完成，会直接返回一组Promise对象，无法达到你预期的等待逻辑。

解决方案 #

根据业务需求，有两种常见处理方式：

方式1：顺序执行异步操作（逐个完成）

如果需要等前一个myAsyncFunction执行完再执行下一个，用for...of循环替代map：

// /app/api/tacos/route.js
export async function GET(request) {
  const data = [{name: 'a'}, {name: 'b'}, {name: 'c'}];

  try {
    // 用for...of顺序遍历，逐个等待异步操作完成
    for (const item of data) {
      await myAsyncFunction();
    }
  } catch (error) {
    console.log('error', error);
  }
};

const myAsyncFunction = async () => {
  console.log('myAsyncFunction');
};

方式2：并行执行异步操作（同时触发）

如果不需要严格顺序，想让所有myAsyncFunction同时执行，用Promise.all配合map（给map回调加上async）：

// /app/api/tacos/route.js
export async function GET(request) {
  const data = [{name: 'a'}, {name: 'b'}, {name: 'c'}];

  try {
    // 用Promise.all等待所有异步操作全部完成
    await Promise.all(
      data.map(async (item, index) => {
        await myAsyncFunction();
      })
    );
  } catch (error) {
    console.log('error', error);
  }
};

const myAsyncFunction = async () => {
  console.log('myAsyncFunction');
};

关键注意点 #

• 每个需要使用await的函数，都必须单独标记为async，外层函数的async不会自动“继承”给内部嵌套函数。
• map、forEach这类数组迭代方法的异步回调不会自动等待，需要配合Promise.all来处理批量异步任务的等待逻辑。

内容的提问来源于stack exchange，提问作者Octo Palm Tree