函数方法
添加 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无返回