Nuxt中如何自定义Prisma错误并结合useFetch使用？

后端（Prisma API）修改 #

要捕获唯一约束冲突并返回自定义错误，需要识别Prisma的P2002错误码（唯一约束违反），然后设置对应HTTP状态码和返回错误信息：

import { PrismaClient, Prisma } from "@prisma/client";
const prisma = new PrismaClient();
export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  console.log("in backend create person");
 
  let memberSince = new Date(body.memberSince);
  try {
    const person = await prisma.person.create({
      data: {
        firstName: body.firstName,
        lastName: body.lastName,
        email: body.email,
        phone: body.phone,
        memberSince: memberSince,
        memberLastYear: body.memberLastYear,
      },
    });
    return person;
  } catch(e) {
    // 识别Prisma唯一约束错误
    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === 'P2002') {
      // 检查是否是fullName唯一约束冲突
      if (e.meta?.target === ['firstName', 'lastName']) {
        setResponseStatus(event, 409); // HTTP 409 表示资源冲突
        return { error: '该姓名的记录已存在，请不要重复创建' };
      }
    }
    // 其他错误处理
    setResponseStatus(event, 500);
    return { error: '创建人员记录时发生未知错误' };
  }
});

前端（Nuxt useFetch）修改 #

前端需要读取后端返回的错误信息，同时调整模态框关闭逻辑，确保错误时用户能看到提示：

async function onSubmit(event: FormSubmitEvent<any>) {
  console.log("submit");

  const { data, pending, error } = await useFetch("/api/person", {
    method: "POST",
    body: event.data,
  });

  if (data) {
    console.log("logging data");
    console.log(toRaw(data.value));
    personsStore.addPerson(toRaw(data.value));
    emit("close"); // 成功创建后再关闭模态框
  }
  if (error) {
    console.log("logging error");
    // 获取后端返回的自定义错误消息
    const errorMessage = error.value?._data?.error || '创建失败，请稍后重试';
    console.log(errorMessage);
    // 这里可添加UI提示，比如弹出提示框显示errorMessage
    // alert(errorMessage); 或使用项目中的全局提示组件
  }
}

关键说明 #

• 后端通过setResponseStatus设置正确的HTTP状态码，409明确表示冲突，避免默认的500错误。
• 前端通过error.value._data获取后端返回的错误对象，从中提取自定义消息。
• 模态框关闭逻辑移到data存在的分支，确保错误时用户能留在表单页查看提示。

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