uniapp封装uni.request请求统一管理跟token储存管理_uni.request中的token放哪里

uniapp封装uni.request请求统一管理跟token储存管理

1.创建一个js文件

下面展示一些 内联代码片。

/**
 * 设置token
 */
function setToken(key, value){
	return new Promise(function(resolve, reject){
		uni.setStorage({
			key: key,
			data: value,
			success: function () {
				resolve();
			},
			fail:function(){
				uni.showToast({
					title:"设置缓存失败",
					icon:"none"
				})
			}
		});
	})
}

/**
 * 获取token
 */
function getToken(key){
	try {
	    const value = uni.getStorageSync('token');
	    if (value) {
					return value;
	    }
	} catch (e) {
	    // error
	}
	return "";
}

let domain = "后端接口地址";

/**
 * 发送请求
 */
function request(obj, that){
	let url = obj.url ? obj.url : "";
	let data = obj.data ? obj.data : {};
	let method = obj.method ? obj.method : "POST";
	let fail = obj.fail ? obj.fail : null;
	
	
	// 处理token
	let token = "";
	if (that.token){
		token = that.token;
	}else{
		token = getToken("token");
		if (token){
			that.token = token;
		}
	}

	return new Promise(function(resolve, reject){
		
		let isShow = false; // 是否显示出加载动画
		let timer = setTimeout(function(){
			uni.showLoading({
				title:"加载中"
			})
			isShow = true;
		}, 500)
		
		uni.request({
			url: domain + url,
			method: method,
			header:{
				"token":token
			},
			data:data,
			success(res) {
				clearTimeout(timer);
				if(isShow){
					uni.hideLoading();
				}
				
				// 公共逻辑
				//console.log(res);
				if (res.data.code === 1001) {
					// 登录失效重新登录
					uni.clearStorageSync("token");
					that.token = null;
					uni.navigateTo({
						url:"/pages/login/login"
					})
					return;
				}
				
				if(res.data.code != 0){
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
					setTimeout(function(){
						typeof fail === "function" ? fail(res) : '';
						reject(res)
					}, 1000)
					return;
				}
				resolve(res);
			},
			fail: () => {
				uni.showToast({
					title: "请求失败",
					icon: "none"
				});
			}
		})
	})
}

export default {
	setToken:setToken,
	getToken:getToken,
	request:request,
	domain:domain
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

2.在App.vue中如下引入

下面展示一些 内联代码片。

<script>
	import request from "路径";
	export default {
		globalData:{
			setToken(key,value){
				return request.setToken(key, value);
			},
			getToken(key){
				return request.getToken(key);
			},
			domain: request.domain,
			request(obj){
				// 逻辑处理
				return request.request(obj, this);
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.在页面中使用请求

下面展示一些 内联代码片。

let app = getApp()
app.globalData.request({
	url:'/接口地址,
	data:{
		需要传的参数: null
	}
}).then(function(res){
	接口成功后的函数
}).catch(function(res){
	调用失败的函数
})
1
2
3
4
5
6
7
8
9
10
11

4.在页面中设置token

下面展示一些 内联代码片。

let app = getApp()
let token = 用户token
app.globalData.setToken("token", token)
1
2
3

4.在页面中使用token

下面展示一些 内联代码片。

let app = getApp()
app.globalData.getToken("token")
1
2

5.在页面中使用接口地址

下面展示一些 内联代码片。

let app = getApp()
app.globalData.domain
1
2

这样使用是不是很方便呢 欢迎大家交流。