在NextJS 13.4 API中执行简单POST的正确方法是什么?(响应,NextAPI响应,NextResponse)使用新的应用程序路由器

busg9geu  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(179)

在新的App Router中,在NextJS 13.4中进行简单POST的正确方法是什么?
以前使用NextAPIRequest、NextAPIResponse进行POST的方法,使用if(req.method = 'POST'),通过const { id } = request.query;从URL中提取参数,并使用NextAPIResponse抛出错误消息,这些方法似乎已经过时了。
这个问题与POST、PUT、GET和POST相关.每个都有一点区别。为了清楚起见-在这里询问POST。

huwehgph

huwehgph1#

这里是NextJS 13.4中更新的POST API,使用了新的app routing,包含错误消息。
为了使示例更加清晰,我将包含一个对supabase client的调用;您调用的API可以不同,但您可以看到错误消息等。

// FILE NAME /app/api/tacos/route.js
import { NextResponse } from 'next/server';
import supabase from '../../supabase/client';

export async function POST(request) {
    try {
       // ! OLD WAY
       // const { id, id, newData } = req.body; // ! OLD WAY
       // const dataOldWay = JSON.parse(request.body); // ! OLD WAY
       const {data} = await request.json();

       const { data: insertedData, error } = await supabase.from("my_table").upsert(data).select();

       if (error) {
          console.log("error catch");
          
          return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
          // ! THE FOLLOWING DOES NOT WORK - will assume and return a status 200 response
          // return NextResponse.json({ error: 'Internal Server Error', status: 500 });
       }

       return NextResponse.json({ insertedData });
    } catch {
        return NextResponse.json({ error: 'Catch Error - Internal Server Error' }, { status: 500 });
    }
}

字符串
为清楚起见,在Typescript中,此函数签名将为export async function POST(request: NextRequest) {
阅读更多关于路由处理程序here的信息。
为了完整起见,这里有一个非常简单的函数,我在客户端应用程序中使用它来调用这个API。

// This is being called from a Page in your React app
// 'use client';
// import React from 'react`;
// ... define your other import statements here

const postData = async () => {
   const data = { key1: 'value1', key2: 22222222 };

   try {
      const response = await fetch("/api/saveCalculation", {
         method: "POST",
         body: JSON.stringify({data}),
         headers: {
            "Content-Type": "application/json",
         },
      });

      if (response.ok) {
        //console.log("A OKAY");
        console.log("OKAY");
        const data = await response.json();
        console.log("postData - data upserted", responseData);
      } else {
         // Handle the error
        //  console.log("NOKAY");

        console.log("NOT OKAY");
         const data = await response.json();
         console.log("postData - data NOT upserted", responseData);
      }
   } catch (error) {
      console.error("Error", error);
      const data = await response.json();
      console.log("postData - try/catch - error", responseData);
   }
};


注意:你当然可以在代码中更高的位置合并responseData声明,但我保持了它的简单性,为了可读性,使用了更小的范围。

相关问题