【Nuxt】Nuxt3 解决 useFetch 首次跳转、刷新无数据的问题

函数方法

添加 await nextTick() 和 uuid （uuid 函数随便写个就行，位置也可以放在封装函数里）

const fechData = async () => {
  await nextTick()
  const data = await getNewsList(
    {
      page: paginationData.value.page,
      pageSize: paginationData.value.pageSize,
    },
    uuid()
  )
  newsList.value = data.rows
  paginationData.value.total = data.total
}
fechData()

export async function getNewsList(query: { page: number; pageSize: number }, key?: any) {
  return (await getFetchData({
    url: '/newsList',
    opts: {
      query,
    },
    method: 'get',
    key,
  })) as unknown as Res<NewsItem[]>
}

uuid 函数参考

// 产生一个随机的uuid
export const uuid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    // eslint-disable-next-line no-mixed-operators
    var r = (Math.random() * 16) | 0,
      // eslint-disable-next-line no-mixed-operators
      v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

useFetch 封装

// composables/getData.ts
import type { LocationQuery } from 'vue-router'
import type { NitroFetchRequest } from 'nitropack'
import type { FetchOptions } from 'ofetch'
import { ElMessage } from 'element-plus'
// import fs from 'fs'

interface Params {
  url: NitroFetchRequest
  opts: FetchOptions<any>
  method?: 'get' | 'post' | 'put' | 'delete'
  key?: any
}

export async function getFetchData({ url, opts, method = 'get', key }: Params) {
  // 接口传参要求
  interface QueryItem {
    uid?: string
    token?: LocationQuery
  }
  const route = useRoute()
  const query: QueryItem = route.query
  console.log(key)

  const config = useRuntimeConfig()
  const { data } = await useFetch(url, {
    // 缓存key  用于缓存数据
    key,
    // method此处仅仅只处理了get与post请求
    method,
    // ofetch库会自动识别请求地址，对于url已包含域名的请求不会再拼接baseURL
    baseURL: config.public.baseURL + '',
    // onRequest相当于请求拦截
    onRequest({ request, options }) {
      // 设置请求头
      options.headers = { ...options.headers, authorization: '' }
      // 设置请求参数
      if (method === 'post') {
        options.body = { ...opts.params }
      } else {
        options.params = { ...opts.params }
      }
    },
    // onResponse相当于响应拦截
    onResponse({ response }) {
      // 处理响应数据
      // console.log(response)
    },
    onRequestError({ request, options, error }) {
      // 处理请求错误
      console.warn('request error', error)
      ElMessage.warning('Request Error')
    },
    onResponseError({ request, response, options }) {
      // 处理响应错误
      console.warn('request error', response)
      ElMessage.warning('Request Error')
    },
  })
  // 这里data本身是个ref对象，将其内部值抛出去方便调用时获得数据。
  return data.value
}

感谢

Nuxt3项目中的问题汇总-刷新页面useFetch无返回
Nuxt3数据请求及封装
nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回