我是靠谱客的博主 满意大神,最近开发中收集的这篇文章主要介绍uni-app - 网络请求和数据存储工具类,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

demo 地址: https://github.com/iotjin/jh-uniapp-demo

网络请求是对uni.request请求的简单封装
数据存储是对uni.getStorageSync、uni.setStorageSync的简单封装

torageUtils

使用

使用方法 :

import TorageUtils from '@/common/utils/torageUtils.js'
const TorageUtils = require('@/common/utils/torageUtils.js')

TorageUtils.Jh_setStorageSync('key1', 'value1111')
TorageUtils.Jh_getStorageSync('key1')
console.log(TorageUtils.Jh_getStorageInfoSync());

代码

let isDevelop = process.env.NODE_ENV === 'development';

module.exports = {
	Jh_getStorageSync,
	Jh_setStorageSync,
	Jh_removeStorageSync,
	Jh_clear,
	Jh_getStorageInfoSync,
};

function Jh_getStorageSync(key) {
	try {
		return uni.getStorageSync(key)
	} catch (e) {
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('key:' + key + '取数据失败:' + e);
		}
		return null
	}
}

function Jh_setStorageSync(key, data) {
	try {
		uni.setStorageSync(key, data);
	} catch (e) {
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('key:' + key + '存数据失败:' + e);
		}
	}
}

function Jh_removeStorageSync(key) {
	try {
		uni.removeStorageSync(key);
	} catch (e) {
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('key:' + key + '删数据失败:' + e);
		}
	}
}

function Jh_getStorageInfoSync() {
	try {
		const res = uni.getStorageInfoSync();
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('keys:' + res.keys);
			console.log('currentSize:' + res.currentSize);
			console.log('limitSize:' + res.limitSize);
		}
		return res
	} catch (e) {
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('获取本地Info失败:' + e);
		}
	}
}

function Jh_clear() {
	try {
		uni.clearStorageSync();
	} catch (e) {
		if (isDevelop) {
			console.log('===== torageUtils =====');
			console.log('清空本地数据失败:' + e);
		}
	}
}

httpUtils

使用

使用方法 :

1.在要使用的js文件导入
var HTTP = require('../../../../http/httpUtils.js');

2. 调用
HTTP.post('url', params).then(res => {
}).catch(error=>{
});

代码

/* 网络请求工具类 */

var isProduct = process.env.NODE_ENV === 'production';
var isDevelop = process.env.NODE_ENV === 'development';

function getToken() {
	let token = '1';
	return token;
}

/* 请求头 */
var _header = {
	'content-type': 'application/x-www-form-urlencoded',
	'version': '1.0.0',
}

//处理发送的数据,对数据加密
function handleSendData(params) {
	if (isDevelop) {
		console.log("===== httpUtils 请求参数 =====", params);
	}
	return params;
}

//处理返回数据,对数据解密
function handleReturnData(res) {
	if (isDevelop) {
		console.log("===== httpUtils 返回数据 =====", res.data);
	}
	return res;
}

/**
 * function: 显示/隐藏加载框
 * @isShow 显示/隐藏
 * @loadingText 加载框文字
 */
function showLoading(isShow, loadingText) {
	if (isShow == false) {
		uni.hideLoading()
		return
	}
	if (loadingText == undefined) {} else {
		if (loadingText != "" && isShow == true) {
			uni.showLoading({
				title: loadingText,
			})
		}
	}
}

/* 进行请求 */
const request = (url, method, params, loadingText) => {
	showLoading(true, loadingText)
	return new Promise((resolve, reject) => {
		uni.request({
			url: url,
			method: method,
			data: handleSendData(params),
			header: _header,
			success(res) {
				resolve(handleReturnData(res.data))
			},
			fail(error) {
				// uni.showToast({
				//   title: error,
				//   icon: 'none',
				//   duration: 2000
				// })
				reject(error)
			},
			complete() {
				showLoading(false)
			}
		})
	});
}

/* get请求 */
function get(url, params, loadingText) {
	return request(url, "GET", params, loadingText);
}

/* post请求 */
function post(url, params, loadingText) {
	return request(url, "POST", params, loadingText);
}

/* 文件上传 */
const uploadFile = (url, filePath, params, loadingText) => {
	// console.log("-----文件上传------");
	showLoading(true, loadingText)
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: url,
			name: 'file',
			filePath: filePath,
			formData: handleSendData(params),
			header: _header,
			success(res) {
				resolve(handleReturnData(JSON.parse(res.data)))
			},
			fail(error) {
				reject(error)
			},
			complete: info => {
				showLoading(false)
			}
		})
	})
}

/* 图片加载 */
const loadImage = (url, params) => {
	// console.log("-----图片下载------");
	let auth = '_auth=' + getToken()
	if (url.indexOf("?") > 0) {
		url = url + "&" + auth
	} else {
		url = url + "?" + auth
	}
	return new Promise((resolve, reject) => {
		uni.request({
			url: url,
			method: 'GET',
			data: params,
			header: _header,
			responseType: 'arraybuffer',
			success(res) {
				if (res.statusCode == 200 && res.data.byteLength) {
					let base64 = wx.arrayBufferToBase64(res.data);
					let img = 'data:image/jpeg;base64,' + base64
					resolve(img)
				} else {
					resolve(null)
				}
			},
			fail(error) {
				reject(error)
			},
			complete: info => {}
		})
	})
}

/* 通过module.exports方式提供给外部调用 */
module.exports = {
	request,
	uploadFile,
	loadImage,
	get: get,
	post: post,
}

最后

以上就是满意大神为你收集整理的uni-app - 网络请求和数据存储工具类的全部内容,希望文章能够帮你解决uni-app - 网络请求和数据存储工具类所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部