Skip to content
On this page

😎 uniapp来自雷总的请求封装

接下来这篇请求封装来自作者朋友,一位很厉害的武汉前端developer,他的请求封装和作者自己的相比有异曲同工之妙却又更胜一筹。作者在经过细致的研读之后发现还是很棒的。 为了方便大家的阅读和使用,我对原文章略有删减但是增加了很多注解注释。以下是删减后的源码,一起看看吧....

此篇文章若有疑惑不解之处,欢迎打扰 作者联系微信 Akaibiu 或者联系此篇文章作者 lbnice1121 (烦请备注说明来意,谢谢)

javascript
import store from '../store/index.js'; // 使用vuex来做token的存取
import md5 from 'js-md5'; // 导入雷总对token的md5加密方法
var appleturl = 'http://192.168.1.65:8581'; //本地测试请求url
var appleturl = 'https://xxxxxxxxxxx.com'; //线上环境请求url
export default appleturl; // 暴露url
// #ifdef MP-WEIXIN
// #endif
/** 
 * get方法,对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params, header = {}) {
	var token = store.getters.gettoken; // 取vuex的token
	var refreshToken = md5(token); // 此处雷总使用了加密后的token作为refreshToken
	var heads = {
		'token': token || '',
		'refresh-token': refreshToken || '',
	};
	Object.assign(header, heads);
	return new Promise((resolve, reject) => {
		uni.request({
			method: 'GET',
			url: appleturl + url,
			data: params,
			header: header,
			dataType: 'json',
		}).then((response) => {
			let [error, res] = response; // 解构响应的res或者error 很规格 
			let {
				header,
				statusCode
			} = res;
			if (statusCode == 500) {
				uni.showToast({
					title: '服务器内部错误',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			if (header.token && header.token != token) {
				store.commit('SET_TOKEN', header.token);
			}
			let {
				data,
				msg,
				errCode
			} = res.data;
			if (errCode != 200 && errCode) {
				if (msg == '请先登录') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none', //错误
						duration: 2000
					});
				}
				return;
			}
			resolve(res.data);
		}).catch((error) => {
			let [err, res] = error;
			reject(err)
		})
	});
}

/** 
 * post方法,对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params, header = {}) {
	var token = store.getters.gettoken;
	var city = store.getters.getusercity;
	// console.log(location,'*************')
	var refreshToken = md5(token)
	var heads = {
		'token': token || '',
		'refresh-token': refreshToken || '',
	};
	Object.assign(header, heads);
	return new Promise((resolve, reject) => {
		uni.request({
			method: 'POST',
			url: appleturl + url,
			data: params,
			header,
			dataType: 'json',
		}).then((response) => {
			let [error, res] = response;
			let {
				header,
				statusCode
			} = res;
			// console.log(statusCode)
			if (statusCode == 500) {
				uni.showToast({
					title: '服务器内部错误',
					icon: 'error',
					duration: 2000
				});
				return;
			}

			if (header.token && header.token != token) {
				store.commit('SET_TOKEN', header.token);
			}

			let {
				data,
				msg,
				errCode
			} = res.data;
			if (errCode != 200 && errCode) {
				if (msg == '请先登录') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none', //错误
						duration: 2000
					});
				}
				return;
			}
			// else if(errCode == 0){
			// 	uni.showToast({
			// 		title: msg,
			// 		icon: 'none',
			// 		duration: 2000
			// 	});
			// }
			resolve(res.data);
		}).catch((error) => {
			let [err, res] = error;
			reject(err)
		})
	});
}

/** 
 * upload方法,对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {File} filePath [文件路径] 
 * @param {String} name [文件名称] 
 */
export function upload(url, filePath = '', name = 'file', header = {}) {
	var token = store.getters.gettoken;
	if (!token) token = uni.getStorageSync('token');
	var refreshToken = md5(token)
	var heads = {
		'token': token || '',
		'refresh-token': refreshToken || '',
	};
	Object.assign(header, heads);
	return new Promise((resolve, reject) => {
		var uper = uni.uploadFile({
			url: appleturl + url,
			filePath,
			name,
			header,
		}).then((response) => {
			let [error, res] = response;
			console.log(res)
			res.data = JSON.parse(res.data);
			let {
				data,
				msg,
				errCode
			} = res.data;
			if (errCode != 200 && errCode) {
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none', //错误
						duration: 2000
					});
				}
				return;
			}
			resolve(res.data);
		}).catch((error) => {
			let [err, res] = error;
			reject(err)
		})
	})
}
  • 好了,以上的总结就到此为止了,如果有疑问可以不问也可以联系作者。咱们下期再见! Good bye! 🌸

Released under the MIT License.