Uniapp封装请求拦截

1,834 阅读1分钟

最近一个项目是用uniapp做的,但是uniapp的uni.request({})并没有请求拦截,于是我尝试封装了一下,封装的背景是项目的很多请求是需要携带token的 新建一个utils文件夹,里面有request.js文件,下面是request.js文件

const baseURL='https://story.genielink.cn'
const http=(options)=>{
	const token=uni.getStorageSync('token')
	//如果token不存在就跳转到个人页面,让用户登录
	if(!token){
		uni.navigateTo({
			url:'../people/people_main'
		})
		return ;
	}else{
		return new Promise((resolve,reject)=>{
			uni.request({
				url:baseURL+options.url,
				//请求url中如果没有method,默认是get
				method:options.methods||'GET',
				//请求url中如果没有data,默认为空
				data: options.data || {},
				header: {Authorization:token},
				success:res=>{
					if(!res){
						return uni.showToast({icon:'loading',title:'获取数据失败'})
					}
					console.log(res.data)
					resolve(res)
				},
				fail:err=>{
					return uni.showToast({
						icon:'loading',
						title:'请求失败'
					})
					reject(err)
				}
			})
		})
	}
} 
复制代码

然后在main.js中挂载到全局,

import http from 'pages/utils/request.js'

Vue.prototype.$http=http

然后就可以用this.$http({url: ,method: })请求了


作者:Ivan哲许
链接:juejin.cn/post/697123… 来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。