uni-app项目请求封装 - 请求拦截器

痛定思痛。 2023-07-18 12:44 6阅读 0赞

### uni-app项目请求封装 - 请求拦截器 ###

由于最近公司需要开发移动端，于是我选择了uni-app，之前因为没什么时间一直都没有对请求进行封装所以今天当做经验积累吧，封装一下uni-app的请求，希望相互学习大神勿喷

1.先创建一个request.js

至此我们就完成了普通请求封装，接下是带Token的请求

//带Token请求
    const TokenRequest = (opts, data) => { 
    	let hjr_token = "";
    	uni.getStorage({ 
    		key: 'hjr_token',
    		success: function(res) { 
    			hjr_token = res.data
    		}
    	});
    	//此token是登录成功后后台返回保存在storage中的
    	let DefaultOpts = { 
    		url: baseUrl+opts.url,
    		data: data,
    		method: opts.method,
    		header: opts.method == 'get' ? { 'Token': hjr_token,'X-Requested-With': 'XMLHttpRequest',"Accept": "application/json","Content-Type": "application/json; charset=UTF-8"} : { 'Token': hjr_token,'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    		dataType: 'json',
    	}
    	let promise = new Promise(function(resolve, reject) { 
    		uni.request(DefaultOpts).then(
    			(res) => { 
    				console.log(JSON.stringify(res[1].data))
    				if(res[1].data.state == '100' || res[1].data.state == 100){ 
    					// 后端返回的状态码100为成功状态,成功则返回请求结果,在app调试时可以通过console.log(JSON.stringify(res[1].data))来查看返回值（以项目实际情况为准）
    					resolve(res[1].data)
    				}
    				if(res[1].data.state == '105' || res[1].data.state == 105){ 
    					// 后端返回状态码为105则为未登录状态（以项目实际情况为准）
    					uni.showToast({ 
    						icon:'none',
    					    title: '尚未登录',
    					    duration: 2000 
    					}); 
    					// 尚未登录的逻辑处理
    					return false
    				}
    			}
    		).catch(
    			(response) => { 
    				reject(response)
    			}
    		)
    	})
    	return promise
    }

然后进行导出

// 将对象导出外部引入使用
    export default { 
    	baseUrl,
    	baseRequest,
    	TokenRequest
    }

在需要使用到的地方 import request from ‘@/utils/request.js’ 引入

至此就完成基本的uni-app请求与拦截器封装。由于写的比较仓促，所以仅供参考，如果有错误的地方或是需要加以完善的地方也欢迎大神提出