11月16日nuxt3.0已正式发布,本文做了一些调整
目前nuxt3即将发布rc版本,跟nuxt2比还是有很大区别,使用了ts和vue3,nuxt3的使用下来,体验还是很不错的,那么如何在nuxt3里面封装一个http请求呢
相关文档:https://v3.nuxtjs.org/docs/usage/data-fetching;
新建一个http.ts
以下是基于rc.8以上版本增加了createError,错误可以在error.vue中展示
import { hash } from 'ohash'
// 后端返回的数据类型
export interface ResOptions<T> {
data?: T
code?: number
msg?: string
}
/**
* api请求封装
* @param { String } url 请求地址
* @param { Object } options useFtech第二个参数
* @param { Object } headers 自定义header头, 单独设置headers区分请求参数,也好设置类型
*/
const fetch = (url: string, options?: any, headers?: any): Promise<any> => {
const { public: { VITE_API_HOST } } = useRuntimeConfig() // 3.0正式版环境变量要从useRuntimeConfig里的public拿
const reqUrl = VITE_API_HOST + url // 你的接口地址
// 不设置key,始终拿到的都是第一个请求的值,参数一样则不会进行第二次请求
const key = hash(JSON.stringify(options) + url)
// 可以设置默认headers例如
const customHeaders = { token: useCookie('token').value, ...headers }
return new Promise((resolve, reject) => {
useFetch(reqUrl, { ...options, key, headers: customHeaders }).then(({ data, error }) => {
if (error.value) {
reject(error.value)
return
}
const value: ResOptions<any> = data.value
console.log('useFetchResData: ', value)
if (!value) {
// 这里处理错你自定义的错误,例如code !== 1
throw createError({
statusCode: 500,
statusMessage: reqUrl,
message: '自己后端接口的报错信息',
})
} else {
resolve(value)
}
}).catch((err: any) => {
console.log(err)
reject(err)
})
})
}
export default class Http {
get(url: string, params?: any, headers?: any): Promise<any> {
return fetch(url, { method: 'get', params }, headers)
}
post (url: string, params?: any, headers?: any): Promise<any> {
return fetch(url, { method: 'post', params }, headers)
}
put (url: string, params?: any, headers?: any): Promise<any> {
return fetch(url, { method: 'put', params }, headers)
}
delete (url: string, params?: any, headers?: any): Promise<any> {
return fetch(url, { method: 'delete', params }, headers)
}
}
使用方法:composables/index.ts,api接口放在这个里面会自动导入函数
import Http from '@/utils/http'
/**
* 获取标签
*/
export const useGetTags = (params?: { size?: number, page?: number }, headers: any) => {
return Http.get('/app/v1/tags', params, headers)
}
在页面或者组件中使用:
<script lang="ts" setup>
const tags = await useGetTags({ page: 1, size: 10 }, { 'Content-type': 'xxx' })
console.log(tags)
</script>
咱们还可以更加模块化一些
新建一个api文件夹,新建一个index.ts,其他的根据业务模块新建文件,index.ts用于导出其他模块,如图:
比如我想把文章相关的api都写在一个文件里,例如可以在article.ts里面写:
import Http from '@/utils/http'
export default new class article extends Http {
/**
* 获取热门文章
*/
getHot() {
return this.get('/app/v1/article/hotView')
}
/**
* 获取文章详情
* @param { Number } id 文章id
*/
getDetail(id: number) {
return this.get('/app/v1/article/detail/' + id)
}
}
api/index.ts导出这些模块:
import articleApi from '@/api/article'
export default {
articleApi,
}
composables/index.ts中:
import api from '@/api/index'
export const useApi = () => api
然后页面中使用:
<script lang="ts" setup>
const { articleApi } = useApi()
const tags = await articleApi.getTags({ page: 1, size: 50 })
console.log(tags)
</script>
请问需要请求第三方服务器,怎么配置才不会跨域呢?
请问为什么我的客户端有跨域问题
请问博主试过使用nitro的devProxy配置做代理吗,我使用代理会一直重试请求,过段时间会返回一个404的结果,不知道为什么
博主您好 我想请问下有没有不暴露后端 代理转发api的方式
板大真的太强了 在请教板大一个蠢问题 封装后要如何再pages使用refresh或pending等参数呢?
请问板大, 假如一个page要打很多Api,是不是每个Api都要打一次headers 有没有办法统一写在/utils/http.ts 内
请问若取得api需要再headers里输入Subscription-Key 要怎么将key传入headers呢?
博主您好 我认真的看了您的useFetch封装的这篇文章 之前我自己封装过 但是没办法在header里边添加token 我看您是加在data里面作为参数传递token的 请问如何将token放在header里边去呢
报这个是怎么回事?nuxt instance unavailable
基础问题,刚刚的问题解决了。是baseurl没弄好~~