项目场景:

uniapp封装request时,token过期后统一处理


问题描述

请求头需要token,token有时间,时间到了,后端会返回一个状态码标志token过期了,需要重新获取token,之后再次请求此接口获取数据。
httpTokenRequest是封装的request方法

const httpTokenRequest = (opts, data) => {
	let token = uni.getStorageSync('token')
		let httpDefaultOpts = {
			url: baseUrl + opts.url,
			data: opts.data,
			method: opts.method,
			header: opts.method == 'GET' ? {
				'X-ACCESS-TOKEN': token,
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/json; charset=UTF-8"
			} : {
				'X-ACCESS-TOKEN': token,
				'X-Requested-With': 'XMLHttpRequest',
				'Content-Type': 'application/json; charset=UTF-8'
			},
			dataType: 'json',
		}
		let promise = new Promise(function(resolve, reject) {
			uni.request(httpDefaultOpts).then(  
				(res) => {
					if(res[0] && res[0].errMsg){
						uni.showToast({
							title: '网络异常!',
							icon: 'none'
						});
					}else{
						if(res[1].data.code == 1600){
							//1600代表token过期,此时会调用获取token的接口
							getToken().then(res =>{
								//token获取成功后,httpTokenRequest自己调用自己,注意:由于上一个httpTokenRequest里的promise没有执行完就调用自己又开启一个promise,所以
								//then返回的res是调用自己后reslove(res[1])的结果。reslove(res),才是最后返回的数据
								httpTokenRequest(opts, data).then(res=>{
									resolve(res)
								})
							})
						}else{
							resolve(res[1])
						}
						
					}
				}
			)
			.catch(
				(response) => {
					reject(response)
				}
			)
		})
		return promise

};

优缺点分析:

提示:这里填写问题的分析:

另一个解决方案:写个带时间的存储方法,在存储token的时候,和后端设置同步的过期时间,在请求前拦截里,判断时间是否过期,再请求。
此方法的优点是少一次请求。
缺点是:需要在使用token的页面引用工具函数,时间还要设置统一,项目复杂的话不好管理,2.若请求时间较长,用户正好处于后端和前端交互的时间空隙。

上述的解决办法:缺点是多一次请求,需要先请求才能判断。
优点是,统一在此处处理,不需要别的工具函数


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐