useAsyncData和useFetch都是nuxt3中请求数据的方法，类似常在vue中使用的axios，不同的是这两个api是官方进行封装过的，具体的可以查看nuxt的官网 (中文)。对于useAsyncData返回的结果为null，其实当时可以使用useFetch在客户端请求，但是使用useAsyncData不就是因为ssr渲染SEO友好么(虽然不懂SEO)同时也是提高自己的技术

1.简单的封装(并未添加拦截器等)

import { useAsyncData } from "#app";

const baseUrl = "基础的url";
const defaultTimeout = 5000;

const fetchService = async ({ url, method, params }: any) => {

  const urls = `${baseUrl}/${url}`;
  const { data: res, pending } = await useAsyncData(urls, () =>
    $fetch(urls, {
      method,
      query: params,
      timeout: 10000,
    })
  );
  // 定义的具体内容根据请求接口的返回数据配置
  interface ApiResponse {
    code: number;
    data: any;
    msg: string;
    total: number;
  } 

  return res.value as ApiResponse;
};

export default fetchService;

2.离谱的bug

页面编写完成之后当我打包部署到服务器时候离谱的来了，在我本地请求数据可以获取数据，但线上的始终无法获取，然后就是各种找bug，看文档，问GPT，但都没办法，直接被这个bug硬控三天！！！

直到第四天突然醒悟，服务器系统是Centos，而这个系统在宝塔中支持的node版本最高不过是16+，但是我想使用的ssr渲染需要在服务端进行请求然后返回页面，而重点在于这个请求是fetch请求，node16+是不支持的，于是当我把服务器系统更换成Debian之后，确实就没有问题，不过现在想想为什么获取不到，只有data是null，我返回的code等字段还在，但不论怎么说至少知道。