编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

一个好用的uniapp请求库(uniapp请求传递和获取数据)

wxchong 2024-07-19 05:48:21 开源技术 23 ℃ 0 评论

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;
				});

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表