Nuxt3的Server文件的接口编写和useFetch请求接口（包括查询参数、请求体、路径参数、表单）

前言

4种数据获取方式

查询参数
请求体
路径参数
表单

查询参数

客户端代码：

<script setup lang="ts">
const res = await useFetch("/api/hoge?param1=abcd", {
    method: "GET",
    headers: { "Content-Type": "application/json" },
});
</script>

服务端代码：

服务端也需要按照文档使用getQuery方法进行获取，Nuxt3的自动导入功能无需使用import语句。

假设以下文件结构，创建index.get.ts：

server/
  |- api/
     |- hoge/
         |- index.get.ts

index.get.ts代码：

export default defineEventHandler(async (event) => {
    const query = getQuery(event)
    console.log(query.param1); // 输出为"abcd"
});

服务端可以通过query.param1=abcd来获取值。

请求体

客户端代码：

<script setup lang="ts">
const res = await useFetch("/api/hoge", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ comment: "test" }),
});
</script>

服务端代码：

在服务端获取请求体的值时，需要使用readBody方法。

假设以下文件结构，创建index.post.ts：

server/
  |- api/
     |- hoge/
         |- index.post.ts

index.post.ts代码：

export default defineEventHandler(async (event) => {
    const body = await readBody(event); // 使用readBody方法
    console.log(body) // 输出为"{ comment: "test" }"
});

服务端可以通过body={ comment: "hoge" }来获取值。

路径参数

实现服务器API端的路径参数获取时，可以按照前端路由的规则进行实现。

客户端代码：

<script setup lang="ts">
const res = await useFetch("/api/hoge/abcd", {
    method: "GET",
    headers: { "Content-Type": "application/json" },
});
</script>

服务端代码：

为了接收路径参数的值，需要在服务器API的server/api目录下创建与前端相似的命名规则，例如[id].${method}.ts。这样，服务端可以通过event.context.params?.id来访问[id]指定的值。

假设以下文件结构，创建[id].get.ts：

server/
  |- api/
     |- hoge/
         |- [id].get.ts

[id].get.ts代码：

export default defineEventHandler(async (event) => {
    const id: string | undefined = event.context.params?.id;
    console.log(id); // 输出为"abcd"
});

通过执行以上代码，客户端的/api/hoge/abcd中的abcd部分将存储在服务端的event.context.params.id中。

[id]部分可以是任意字符串。例如，如果想要使用testId变量名获取值，可以创建[testId].get.ts文件。

在这种情况下，API的实现也需要相应更改为testId。

[testId].get.ts代码：

export default defineEventHandler(async (event) => {
    const testId: string | undefined = event.context.params?.testId;
    console.log(testId);
});

表单

表单用于实现上传媒体文件（如图片或视频）的功能。

关于表单的具体信息，Nuxt3的文档中尚未提及，但可以在Nuxt3的服务器端库h3的文档中找到相关信息。

客户端代码：

在客户端发送媒体数据时，将FormData()作为body参数传递给请求。在向formData添加值时，键名应与服务器API中查询时使用的键名相同。

以下示例演示如何使用多部分表单将媒体文件和JSON数据一起发送到服务器：

<script setup lang="ts">
const formData = new FormData();

formData.append("body", JSON.stringify({comment: "test" }));
formData.append("file", ${fileDataURL}); // 设置要发送的媒体文件的dataURL

const res = await useFetch(
  `/api/hoge`,
  {
    method: "POST",
    body: formData,
  }
)
</script>

服务端代码：

在服务端获取使用多部分表单发送的请求值时，可以使用readMultipartFormData方法。由于Nuxt3的自动导入功能，无需使用import语句。

与获取请求体时类似，假设以下文件结构，创建index.post.ts：

server/
  |- api/
     |- hoge/
         |- index.post.ts

index.post.ts代码：

export default defineEventHandler(async (event) => {
  const data = await readMultipartFormData(event!);

  // 获取请求体和文件
  let body: any | undefined = undefined;
  let file: Buffer | undefined = undefined;

  for (const d of data) {
    if (d.name === "body") {
      // 客户端在formData中注册为"body"的值
      body = {
        ...JSON.parse(d.data.toString()),
      };
    } else if (d.name === "file") {
      // 客户端在formData中注册为"file"的值
      file = d.data;
    }
  }
});