概述
以下方式只能在 setup / 生命周期钩子 里面使用。
useFetch
基本使用
下面的 API / hooks 具体用法查看官网文档。
const BASE_URL = 'http://codercba.com:9060/juanpi/api';
// 1. $fetch server and client
// $fetch(BASE_URL + '/homeInfo', {
// method: 'GET'
// }).then(res => {
// console.log(res)
// })
// 2. useAsyncData 在刷新页面时减少客户端发送的一次请求 只在 server 端发送请求
// interface HomeInfo {
// code: number
// data: any
// }
// const {data} = await useAsyncData<HomeInfo>('homeInfo', () => {
// return $fetch(BASE_URL + '/homeInfo', {
// method: 'GET'
// })
// })
// console.log(data.value)
// 3. useAsyncData 的简写 useFetch
// const {data: dataInfo} = await useFetch(BASE_URL + '/homeInfo', {method: 'GET'});
// console.log(dataInfo.value)
// 3.1 拦截器
const {data: dataInfo} = await useFetch(BASE_URL + '/goods', {
method: 'POST',
// 请求拦截器
onRequest({request, options}) {
options.headers = {
token: '123456'
}
},
// 请求错误的拦截
onRequestError({request, options, error}) {
// console.log(context.error)
console.log(error)
},
onResponse(context) {
if (context.response.status === 401) {
// 未登录
}
},
onResponseError(context) {
if (context.response.status === 401) {
// 未登录
}
}
})
console.log(dataInfo.value)
const count = ref();
// 刷新 客户端不发送请求 服务端发送请求 水合后客户端可以获取请求后的数据
const {data, refresh, pending} = await useFetch(BASE_URL + '/homeInfo', {
method: 'GET',
body: {
count: count
}
});
function refreshPage() {
// 响应式数据变化或者直接调 refresh() 都可以触发客户端的发送请求(刷新请求)
// refresh();
count.value++
}
封装 useFetch
// import type { AsyncData, UseFetchOptions } from 'nuxt/dist/app/composables'
import type {AsyncData, UseFetchOptions} from "#app";
const BASE_URL = 'http://codercba.com:9060/oppo-nuxt/api/'
type Methods = 'GET' | 'POST'
export interface IResultData<T> {
code: number
data: T
}
class MYRequest {
request<T = any>(
url: string,
method: Methods,
data?: any,
options?: UseFetchOptions<T>
): Promise<AsyncData<T, Error>> {
return new Promise((resolve, reject) => {
const newOptions: UseFetchOptions<T> = {
baseURL: BASE_URL,
method: method,
...options
}
if (method === 'GET') {
newOptions.query = data
}
if (method === 'POST') {
newOptions.body = data
}
useFetch<T>(url, newOptions as any)
.then((res) => {
resolve(res as AsyncData<T, Error>)
})
.catch((error) => {
reject(error)
})
})
}
get<T = any>(url: string, params?: any, options?: UseFetchOptions<T>) {
return this.request<T>(url, 'GET', params, options)
}
post<T = any>(url: string, data?: any, options?: UseFetchOptions<T>) {
return this.request<T>(url, 'POST', data, options)
}
}
export default new MYRequest()
export const getHomeInfoAPI = (type: HomeInfoDataType) => {
return myRequest.get<IResultData<IHomeInfo>>('/home/info', {
type: type || 'oppo'
})
}
useLazyFetch
const BASE_URL = 'http://codercba.com:9060/juanpi/api';
// // useFetch 默认会阻塞页面的导航 lazy 可以设置成 true 让其变成懒加载(不阻塞)
// const {data} = await useFetch(BASE_URL + '/homeInfo', {method: 'GET', lazy: true});
// // 确保可以获取 data
// watch(data, (newVal) => {
// console.log(newVal)
// })
// 以上代码可以简化为
const {data} = await useLazyFetch(BASE_URL + '/homeInfo', {method: 'GET'});
onMounted(() => {
console.log(data?.value)
})