uniapp中uni.request请求二次封装
uni.request请求二次封装uniapp
话不多说,先上环境,本文章环境为 Uniapp - Vue3 - Typescript;
*前言
作为前端开发人员,相信大家对请求二次封装已经不陌生了,在我们项目中,前端和后端的交互就是通过ajax请求来完成的,通常我们会使用优秀的第三方库axios来完成工作,对于axios大家都知道它提供了请求、响应拦截器,我们通过二次封装可以大大节省我们的请求编码,那么在uniapp开发中,我们除了使用axios还可以使用一下uniapp官方提供的uni.request请求,今天就来写一下uni.request该如何进行二次封装。
一、请求拦截器
请求拦截器通常做的事情就是配置公共请求的响应头、请求默认地址、超时时间等信息,在uniapp官方给我们提供了一个请求的拦截方法:uni.addInterceptor(请求名称,配置对象)
const baseURL = 'https://123.456.4515'
// 添加拦截器
const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 请求超时, 默认 60s
options.timeout = 10000
// 3. 添加一些项目特有请求头标识
options.header = {
...options.header,
}
// 4. 添加 token 请求头标识
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
},
}
uni.addInterceptor('request', httpInterceptor)
在上述代码中,uni.addInterceptor第一个参数为我们要拦截的请求,我们是request,第二个为定义的配置对象,对象中的inovke为请求前触发的函数,接收一个请求对象信息,
第一步,拼接公共地址baseURL,在axios中会自动拼接,但是uni.request需要自己手动完成,在此要判断是否为http开头,因为项目中可能会用到远程请求,会有完成的地址出现,所以要区分一下;
第二步,配置一个请求超时时间,对于超过时间的请求进行中断,通常是服务器异常或者网络问题导致,请求不到就不要一直发送占用内存。
第三步,就是添加请求头信息了,在此我们可以添加token,或者一些密钥等信息
完成上诉,前置请求就基本完成了,具体可查阅官网地址进行扩展,地址在下面:
uni.addInterceptor(STRING, OBJECT) | uni-app官网
二、请求/响应
接下来配置我们的请求函数以及响应处理;
type Data<T> = {
code: string
msg: string
result: T
}
// 2.2 添加类型,支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
// 1. 返回 Promise 对象
return new Promise<Data<T>>((resolve, reject) => {
uni.request({
...options,
// 响应成功
success(res) {
// 状态码 2xx,
if (res.statusCode >= 200 && res.statusCode < 300) {
// 2.1 提取核心数据 res.data
resolve(res.data as Data<T>)
} else if (res.statusCode === 401) {
// 401错误 -> 清理用户信息,跳转到登录页
const memberStore = useMemberStore()
memberStore.clearProfile()
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
// 其他错误 -> 根据后端错误信息轻提示
uni.showToast({
icon: 'none',
title: (res.data as Data<T>).msg || '请求错误',
})
reject(res)
}
},
// 响应失败
fail(err) {
uni.showToast({
icon: 'none',
title: '网络错误,换个网络试试',
})
reject(err)
},
})
})
}
上面代码的主要共工作,配置基础请求信息,添加ts类型配置,处理响应结果
我们仿造axios的工作流程,返回一个promise对象,便于我们在项目中使用async/await等异步语法。
第一步,函数的ts类型配置,一般同一个后端给出的接口响应结构都差不多,只有data层面的变化,我们可以定义好公共的响应类型,将data层面定义为泛型
第二步,调用uni.request函数,展开运算符和并请求体内容
第三步,succes和fail方法的配置,这两个方法为官方提供的响应成功和失败的钩子,在成功success函数中我们拿到请求返回的精简数据,判断请求状态为成功后resolve(res.data)发出响应最终数据,如果是失败等信息,根据自己后端的定义完成错误提示,并且通过reject返回错误信息,通常401为身份失效;接下来就是响应失败,该函数执行意味着请求都未成功,大部分原因就是网络造成的,做一些轻提示即可,最终也reject(error)返回错误信息;
-------------------------------------------------------------------------------------------------------------------------
完成上述配置导出http请求函数就可以在组件中进行使用了,包括api的封装和平时都一样了,使用reques可以减少axios模块的安装,也能实现相应功能,快来试试吧~
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)