获取数据

1. $fetch
2. useAsyncData
3. useFetch
4. useLazyFetch
5. useLazyAsyncData

这些函数只能用在 setup or Lifecycle Hooks 中。

1.$fetch

server与client都会发送网络请求（有重复发送缺点，建议使用nuxt提供的hook）

// 1.使用 $fetch 来发起网络请求
// server and client
$fetch(BASE_URL + "/homeInfo", {method: "GET",
}).then((res) => {console.log(res);
});

2.useAsyncData

useAsyncData(url, () => $fetch(url))
在刷新页面时, 可以减少客户端发起的一次请求，服务端会发起请求
切换路由客户端会发起网络请求，服务端不会
会阻塞导航

3.useFetch

useFetch接收URL并获取数据，而useAsyncData可能有更复杂的逻辑。
useFetch(url)几乎等同于useAsyncData(url, () => $fetch(url))

文档

function useFetch(url: string | Request | Ref | () => string | Request,options?: UseFetchOptions
): Promise>
type UseFetchOptions = {key?: stringmethod?: stringquery?: SearchParamsparams?: SearchParamsbody?: RequestInit['body'] | Recordheaders?: { key: string, value: string }[]baseURL?: stringserver?: booleanlazy?: booleanimmediate?: booleandefault?: () => DataTtransform?: (input: DataT) => DataTpick?: string[]watch?: WatchSource[]
}
type AsyncData = {data: Refpending: Refrefresh: (opts?: { dedupe?: boolean }) => Promiseexecute: () => Promiseerror: Ref
}

refresh刷新，与响应式参数改变再次请求

使用拦截器

const { data, pending, error, refresh } = await useFetch('/api/auth/login', {onRequest({ request, options }) {// Set the request headersoptions.headers = options.headers || {}options.headers.authorization = '...'},onRequestError({ request, options, error }) {// Handle the request errors},onResponse({ request, response, options }) {// Process the response datareturn response._data},onResponseError({ request, response, options }) {// Handle the response errors}
})

官方文档

4.useLazyFetch

useLazyFetch 为useFetch提供了一个包装器，通过将lazy选项设置为true，在处理程序解析之前触发导航。不会阻塞导航
使用watch确保一定可以拿到这个data的数据

5.useLazyAsyncData

useLazyAsyncData为useAsyncData提供了一个包装器，通过将lazy选项设置为true，在处理程序解析之前触发导航。
官方文档

useFetch 函数对比 axios

获取数据Nuxt推荐使用 useFetch 函数，为什么不是 axios ?

1. useFetch 底层调用的是$fetch函数，该函数是基于unjs/ohmyfetch请求库，并与原生的Fetch API有者相同API
2. unjs/ohmyfetch 是一个跨端请求库： A better fetch API. Works on node, browser and workers
3. 如果运行在服务器上，它可以智能的处理对 API接口的直接调用。
4. 如果运行在客户端行，它可以对后台提供的 API接口 正常的调用（类似 axios），当然也支持第三方接口的调用
5. 会自动解析响应和对数据进行字符串化
6. useFetch 支持智能的类型提示和智能的推断 API 响应类型。
7. 在setup中用useFetch获取数据，会减去客户端重复发起的请求

请求封装

import type { AsyncData, UseFetchOptions } from "nuxt/dist/app/composables";const BASE_URL = "http://codercba.com:9060/juanpi/api/";
type Methods = "GET" | "POST";export interface IResultData {code: number;data: T;
}class HYRequest {request(url: string,method: Methods,data?: any,options?: UseFetchOptions): Promise> {return new Promise((resolve, reject) => {const newOptions: UseFetchOptions = {baseURL: BASE_URL,method: method,...options,};if (method === "GET") {newOptions.query = data; // query -> params}if (method === "POST") {newOptions.body = data;}useFetch(url, newOptions as any).then((res) => {// res => { data:T, pending, refresh, error ... } => AsyncDataresolve(res as AsyncData);}).catch((error) => {reject(error);});});}get(url: string, params?: any, options?: UseFetchOptions) {return this.request(url, "GET", params, options);}post(url: string, data?: any, options?: UseFetchOptions) {return this.request(url, "POST", data, options);}
}export default new HYRequest();

Server API

1. Nuxt自动扫描~/server/api, ~/server/routes, 和 ~/server/middleware目录中的文件，以注册具有HMR支持的API和服务器处理程序。
2. 每个文件都应该导出一个用defineEventHandler()定义的默认函数。
3. 处理程序可以直接返回JSON数据，一个Promise或使用event.node.res.end()发送响应。

实例
创建一个新文件server/api/homeInfo.ts:

export default defineEventHandler((event) => {let { req, res } = event.node;console.log(req.method);console.log(req.url);return {code: 200,data: {name: "liujun",age: 18,},};
});

你现在可以使用await $fetch(‘/api/homeInfo’)通用地调用这个API。
官方文档server