如何优雅的封装 Nuxt3 useFetch

Nuxt3 数据获取介绍

• useFetch 是在组件设置函数中处理数据获取的最简单方法。

• $fetch 可以根据用户交互进行网络请求。

• useAsyncData 结合 $fetch，提供了更精细的控制。

为什么需要使用特定的组合函数

网络请求重复

useFetch 功能简述

const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // 设置请求头
    options.headers = options.headers || {}
    options.headers.authorization = '...'
  },
  onRequestError({ request, options, error }) {
    // 处理请求错误
  },
  onResponse({ request, response, options }) {
    // 处理响应数据
    localStorage.setItem('token', response._data.token)
  },
  onResponseError({ request, response, options }) {
    // 处理响应错误
  }
})

useFetch 的封装

// /composables/useHttp.ts

import type { FetchError, FetchResponse, SearchParameters } from 'ofetch'
import { hash } from 'ohash'
import type { AsyncData, UseFetchOptions } from '#app'
import type { KeysOf, PickFrom } from '#app/composables/asyncData'

type UrlType = string | Request | Ref<string | Request> | (() => string | Request)

type HttpOption<T> = UseFetchOptions<ResOptions<T>, T, KeysOf<T>, $TSFixed>
interface ResOptions<T> {
  data: T
  code: number
  success: boolean
  detail?: string
}

function handleError<T>(
  _method: string | undefined,
  _response: FetchResponse<ResOptions<T>> & FetchResponse<ResponseType>,
) {
  // Handle the error
}

function checkRef(obj: Record<string, any>) {
  return Object.keys(obj).some(key => isRef(obj[key]))
}

function fetch<T>(url: UrlType, opts: HttpOption<T>) {
  // Check the `key` option
  const { key, params, watch } = opts
  if (!key && ((params && checkRef(params)) || (watch && checkRef(watch))))
    console.error('\x1B[31m%s\x1B[0m %s', '[useHttp] [error]', 'The `key` option is required when `params` or `watch` has ref properties, please set a unique key for the current request.')

  const options = opts as UseFetchOptions<ResOptions<T>>
  options.lazy = options.lazy ?? true

  const { apiBaseUrl } = useRuntimeConfig().public

  return useFetch<ResOptions<T>>(url, {
    // Request interception
    onRequest({ options }) {
      // Set the base URL
      options.baseURL = apiBaseUrl
      // Set the request headers
      const { $i18n } = useNuxtApp()
      const locale = $i18n.locale.value
      options.headers = new Headers(options.headers)
      options.headers.set('Content-Language', locale)
    },
    // Response interception
    onResponse(_context) {
      // Handle the response
    },
    // Error interception
    onResponseError({ response, options: { method } }) {
      handleError<T>(method, response)
    },
    // Set the cache key
    key: key ?? hash(['api-fetch', url, JSON.stringify(options)]),
    // Merge the options
    ...options,
  }) as AsyncData<PickFrom<T, KeysOf<T>>, FetchError<ResOptions<T>> | null>
}

export const useHttp = {
  get: <T>(url: UrlType, params?: SearchParameters, option?: HttpOption<T>) => {
    return fetch<T>(url, { method: 'get', params, ...option })
  },

  post: <T>(url: UrlType, body?: RequestInit['body'] | Record<string, any>, option?: HttpOption<T>) => {
    return fetch<T>(url, { method: 'post', body, ...option })
  },

  put: <T>(url: UrlType, body?: RequestInit['body'] | Record<string, any>, option?: HttpOption<T>) => {
    return fetch<T>(url, { method: 'put', body, ...option })
  },

  delete: <T>(url: UrlType, body?: RequestInit['body'] | Record<string, any>, option?: HttpOption<T>) => {
    return fetch<T>(url, { method: 'delete', body, ...option })
  },
}

API 的封装

// /api/news.ts

enum API {
  NEWS = '/news',
}

interface NewsDetailModel {
  content: string
  createAt: string
  id: number
  language: string
  summary: string
  title: string
  titleUrl: string
  updateAt: string
  url: string | null
}

export interface NewsListParams {
  _limit?: number
  _page?: number
}

interface PaginationMeta {
  count: number
  limit: number
  page: number
}

interface NewsListResponse {
  items: NewsDetailModel[]
  meta: PaginationMeta
}

export async function getNewsList(params?: NewsListParams, option?: HttpOption<NewsListResponse>) {
  return await useHttp.get<NewsListResponse>(API.NEWS, params, { ...option })
}

API 的使用

<script setup lang="ts">
import { getNewsList } from '~/api/news'

const { data } = await getNewsList()
</script>

<template>
  <div>
    {{ data }}
  </div>
</template>

<script setup lang="ts">
import { hash } from 'ohash'
import { getNewsList } from '~/api/news'
import type { NewsListParams } from '~/api/news'

const page = ref(1)

const { data, pending, error } = await getNewsList({
  _limit: 10,
  _page: page as unknown as NewsListParams['_page'],
}, { key: hash('news_list') })
</script>

<template>
  <div>
    {{ data }}
  </div>
</template>