串接後端 API 已經是前端必備技能了，通常會使用 Axios 或 fetch ($.ajax, XMLHttpRequest...)，Nuxt3 中提供了四種方法：useAsyncData、useFetch、useLazyFetch、useLazyAsyncData。

這四種方法看起來是模稜兩可、讓人一頭霧水，如果真的要完全依照設計來使用，過一段時間回來看其實還是會忘記為什麼這樣用，個人會偏好只用 useFetch 就好。

useAsyncData

最基本的用法，方法裡面可以夾帶 options 做一些調整，例如: lazy（預設 false)、server(預設 true，可以在伺服器端執行）...等。下面是簡單的範例：

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

範例中可以看到，裡面傳入的函式使用了 $fetch 方法，如果對撰寫原生 fetch 熟悉，似乎也不需要特地使用這個方法。

useFetch

useFetch 像是 useAsyncData 的進化版，因為他對 useAsyncData 和 $fetch 進行封裝，簡短的一個useFetch(url) 就相當於 useAsyncData(url, () => $fetch(url))。

除此之外，也有相當於 Axios 的攔截器功能，可以對 API 做進一步的設定，官方範例如下：

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

options 裡面也有更多的項目可以做設定，基本上原生 fetch 有的 useFetch 都有。

type UseFetchOptions = {
  key?: string
  method?: string // 方法
  params?: SearchParams // query
  body?: RequestInit['body'] | Record<string, any> // 夾帶內容
  headers?: { key: string, value: string }[]
  baseURL?: string
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  default?: () => DataT
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[]
  initialCache?: boolean
}

useLazyAsyncData

其實就是在 useAsyncData 方法中的 options 加上 lazy: true 而已。

useLazyFetch

跟上面一樣，useFetch 方法中的 options 加上 lazy: true。