Nuxt3服务端使用$fetch调用API后返回值undefined问题排查

问题场景 #

在Nuxt3里用服务端$fetch配合Prisma写入数据库，期望API返回"success"字符串给组件展示，但控制台打印answer时一直显示undefined。纠结是API返回方式错误，还是应该改用useFetch？

组件代码 #

async pushToDatabase() {
  for (const row of this.information) {
    if (row.data.firstName != "" && row.data.lastName != "") {
      const { answer } = await $fetch("/api/addRow", {
        method: "POST",
        body: row,
      });
      console.log(answer);
    }
  }
},

API处理代码 #

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const info = body.data as IAttendeeData;
  console.log(body);
  await prisma.test
    .create({
      data: {
        firstName: info.firstName,
        lastName: info.lastName,
        age: info.age,
        gender: info.gender,
      },
    })
    .then(() => {
      console.log("write worked");
      return "success";
    })
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    .catch((err) => {
      console.log(err.message);
      console.log("failed write");
    });
});

问题原因及解决办法 #

1. API未正确返回响应值 #

你的API函数中，await prisma.test.create(...)的.then()里返回的"success"并没有被作为API的最终响应返回。因为整个defineEventHandler函数没有返回任何内容，所以API默认返回undefined，而且混用await和.then()也容易造成逻辑混乱。

修复后的API代码：

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const info = body.data as IAttendeeData;
  console.log(body);
  
  try {
    await prisma.test.create({
      data: {
        firstName: info.firstName,
        lastName: info.lastName,
        age: info.age,
        gender: info.gender,
      },
    });
    console.log("write worked");
    return "success"; // 该返回值会作为API响应内容返回给前端
  } catch (err) {
    console.log(err.message);
    console.log("failed write");
    return "failed"; // 也可以返回错误信息供前端处理
  }
});

2. 前端解构方式错误 #

你前端使用const { answer } = await $fetch(...)进行解构，但API返回的是纯字符串"success"，并非包含answer字段的对象，所以解构出来的answer自然是undefined。

修复后的组件代码：

async pushToDatabase() {
  for (const row of this.information) {
    if (row.data.firstName != "" && row.data.lastName != "") {
      const answer = await $fetch("/api/addRow", {
        method: "POST",
        body: row,
      });
      console.log(answer); // 现在会正常打印"success"或"failed"
    }
  }
},

关于是否改用useFetch #

完全不需要换useFetch。useFetch主要用于组件初始化时自动获取数据，而你这里是用户触发的主动提交操作，用$fetch才是更合适的选择。

内容的提问来源于stack exchange，提问作者Maaz Mohammad