在nuxt3里useFetch封装一个api接口http请求
目前nuxt3即将发布rc版本,跟nuxt2比还是有很大区别,使用了ts和vue3,nuxt3的使用下来,体验还是很不错的,那么如何在nuxt3里面封装一个http请求呢
相关文档:https://v3.nuxtjs.org/docs/usage/data-fetching;
新建一个http.ts
// 封装请求,2022-1-15 yzp
import { _AsyncData } from 'nuxt3/dist/app/composables/asyncData'
// 指定后端返回的基本数据类型
export interface ResponseConfig {
code: number,
status: number,
data: any,
msg: string
}
export interface ValueConfig {
value: any,
[x: string]: any,
}
const fetch = (url: string, options?: any): Promise<any> => {
const { $config, $router } = useNuxtApp()
const reqUrl = $config.baseURL + url
return new Promise((resolve, reject) => {
useFetch(reqUrl, { ...options }).then(({ data, error }: _AsyncData<any>) => {
if (error.value) {
reject(error.value)
return
}
const value = data.value
if (!value) {
// 这里处理错误回调
// reject(value)
// $router.replace('/reject/' + value.status)
} else {
resolve(ref<any>(value))
}
}).catch((err: any) => {
console.log(err)
reject(err)
})
})
}
export default new class Http {
get(url: string, params?: any): Promise<any> {
return fetch(url, { method: 'get', params })
}
post(url: string, body?: any): Promise<any> {
return fetch(url, { method: 'post', body })
}
put(url: string, body?: any): Promise<any> {
return fetch(url, { method: 'put', body })
}
delete(url: string, body?: any): Promise<any> {
return fetch(url, { method: 'delete', body })
}
}
使用方法:composables/index.ts,api接口放在这个里面会自动导入函数
import Http from '@/utils/http'
/**
* 获取标签
*/
export const getTags = (params?: { size?: number, page?: number }) => {
return Http.get('/app/v1/tags', params)
}
在页面或者组件中使用:
<script lang="ts" setup>
const tags = await getBaseSettings()
console.log(tags.value)
</script>
2