uniapp前端http请求库,并且包含token验证,有json和form两种使用方式
1.请求库
import store from '../store/index.js'
function request(url, method, data, showLoading=true){
console.log(url)
return new Promise((resolve, reject)=>{
if(showLoading){
uni.showLoading({
title: '加载中...'
});
};
data = data || {};
console.log(data)
var _header = {};
var _token = getToken();
if (_token) {
_header['Authorization'] = _token;
}
_header['Content-Type'] = 'application/x-www-form-urlencoded';
// console.log(_token)
// header:{'Content-Type':'application/x-www-form-urlencoded'},
uni.request({
url: url,
header:_header,
data: data,
method: method,
dataType:'json',
success: function(res) {
console.log(res)
if(showLoading){
uni.hideLoading();
};
if(res.statusCode==200){
resolve(res.data);
}else{
var title = res.err_msg;
showToast(title); //提示信息
reject();
}
},
fail:function()
{
uni.hideLoading();
}
});
})
};
function requestJson(url, method, data, showLoading=true){
return new Promise((resolve, reject)=>{
if(showLoading){
uni.showLoading({
title: '加载中...'
});
};
data = data || {};
uni.request({
url: url,
header:{'Content-Type':'application/json'},
data: data,
method: method,
dataType:'json',
success: function(res) {
if(showLoading){
uni.hideLoading();
};
if(res.statusCode==200){
resolve(res.data);
}else{
var title = res.err_msg;
showToast(title); //提示信息
reject();
}
},
fail:function()
{
uni.hideLoading();
}
});
})
};
function getToken() {
return store.getters.getToken();
}
//toast提示信息
export function showToast(title, icon='none'){
uni.showToast({
title: title.toString(),
icon
});
};
//提示功能开发中...
export function showTipPending(){
showToast('功能开发中...');
}
//Modal弹窗
export function showModal(title, content, showCancel=false){
uni.showModal({
title: title.toString(),
content:content.toString(),
showCancel:false
});
};
export function get(url, data, showLoading=true){
return request(url, 'GET', data, showLoading);
}
export function post(url, data, showLoading=true){
return request(url, 'POST', data, showLoading);
}
export function postJson(url, data, showLoading=true){
return requestJson(url, 'POST', data, showLoading);
}
2.store库
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let app_user_token = "app_user_token";
function getUserInfo(state) {
if (state.userInfo) return state.userInfo;
let userInfo = uni.getStorageSync(app_user_token);
if (userInfo) {
state.userInfo = JSON.parse(userInfo);
}
return state.userInfo;
}
const store = new Vuex.Store({
state: {
/**
* 是否需要强制登录
*/
forcedLogin: false,
hasLogin: false,
userName: "",
univerifyErrorMsg: "",
hideUniverify: true,
flowid:"",
test: '',
permission: [],
userInfo: null,
token:""
},
mutations: {
login(state, userName) {
state.userName = userName || '新用户';
state.hasLogin = true;
},
logout(state) {
state.userName = "";
state.hasLogin = false;
},
setUniverifyErrorMsg(state, payload = '') {
state.univerifyErrorMsg = payload
},
setHideUniverify(state, payload = false) {
state.hideUniverify = payload
},
setCountInc(state, value) {
state.test = value;
},
setPermission(state, data) { //调用方式 this.$store.commit('setPermission', data)
if (!data || typeof data != 'object') return;
if (data instanceof Array) {
state.permission.push(...data);
} else {
state.permission = data;
}
},
setUserInfo(state, data) {
state.token = data;
uni.setStorageSync(app_user_token, JSON.stringify(data));
},
setToken(state, data) {
state.token = data;
uni.setStorageSync('token', data);
},
clearUserInfo(state) {
state.permission = [];
state.userInfo = null;
uni.clearStorage(app_user_token);
}
},
actions: {
setPermission(context, data) {
context.commit('setPermission', data); //调用方式 store.dispatch('push')
},
},
getters: {
test(state, getters) {
return state.test
},
getPermission: (state) => (path) => { //调用方式 store.getters.getPermission('sys_User')
if (!path) return state.permission;
return state.permission.find(x => x.path == path);
},
getMenu: (state) => () => {
return state.permission || [];
},
getUserInfo: (state) => () => {
getUserInfo(state);
return state.userInfo;
},
getUserName: (state) => () => {
getUserInfo(state);
if (state.userInfo) {
return state.userInfo.userName;
}
return '未获取到登陆信息';
},
getToken: (state) => () => {
//getUserInfo(state);
if (state.token) {
// return 'Bearer ' + state.token;
return state.token;
}
return '';
},
isLogin: (state) => () => {
if (getUserInfo(state)) {
return true;
}
return false;
}
}
})
export default store
3.调用方法
import {
post,
get,
showModal
} from '../../utils/index.js';
let params = {};
params.username = this.username;
params.password=this.pwd;
var that=this;
console.log(this.url);
post(this.url + 'rest/login', params).then(res => {
this.errMsg=res;
if (res.code === 200) {
this.$store.commit("setToken", res.data);
uni.switchTab({
url: "/pages/index/index"
})
} else {
uni.showToast({
icon: 'none',
title: res.message
});
return;
}
}).catch((err)=>{
this.errMsg=err;
});
本文暂时没有评论,来添加一个吧(●'◡'●)