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
}
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>
3.在页面中使用请求
下面展示一些 内联代码片
。
let app = getApp()
app.globalData.request({
url:'/接口地址,
data:{
需要传的参数: null
}
}).then(function(res){
接口成功后的函数
}).catch(function(res){
调用失败的函数
})
4.在页面中设置token
下面展示一些 内联代码片
。
let app = getApp()
let token = 用户token
app.globalData.setToken("token", token)
4.在页面中使用token
下面展示一些 内联代码片
。
let app = getApp()
app.globalData.getToken("token")
5.在页面中使用接口地址
下面展示一些 内联代码片
。
let app = getApp()
app.globalData.domain
这样使用是不是很方便呢 欢迎大家交流。