uni-app项目实践一（uni.request网络请求封装）

最近在使用uni-app开发一个小程序，是一个从零开始，自学自主开发的项目，所以在这里和大家分享一下开发历程，首先是项目框架搭建，一般就使用HBuilderX创建就可，今天主要记录uni.request网络请求封装。

1.编写一个request.js

import {
	getToken,
	removeToken,
	removeName,
	removePhone,
	removeIDNum,
	removeUserId
} from '@/utils/auth'
import {
	baseUrl
} from '@/utils/baseUrl.js'

/** 请求参数 
 * 1.url，请求地址
 * 2.data，请求参数
 * 3.funSuccess，成功回调地址
 * 4.funError，失败回调地址
 * 5.hideLoading，是否显示请求弹框
 */
/* request:POST */
export function requestPost(url, data, funSuccess, funError, hideLoading) {
	requestTask(url, data, funSuccess, funError, hideLoading, "POST");
}
/* request:GET */
export function requestGet(url, data, funSuccess, funError, hideLoading) {
	requestTask(url, data, funSuccess, funError, hideLoading, "GET");

}

/* 网络请求封装 */
// 不需要登录的接口
const noToken = [
	'api/login', 'api/sendVerifyCode', 'api/user/joinPlan'
];

function requestTask(url, data, funSuccess, funError, hideLoading, type) {
	// 获取token
	let userToken = getToken();
	// 判断是否需要登录
	if (!(noToken.indexOf(url) >= 0)) {
		// 获取用户 token
		if (!userToken) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
	}
	//开始请求，网络请求弹框（根据业务判断显示与否，比较复杂的业务显示，一般请求返回迅速不显示）
	if (hideLoading) {
		uni.showLoading({
			title: '加载中'
		});
	}
	uni.request({
		//请求地址
		url: baseUrl + url,
		//请求头
		header: {
			'Content-Type': 'application/json; charset=utf-8',
			'Accept': 'application/json, text/javascript, */*; q=0.01',
			'Authorization': userToken
		},
		//HTTP请求类型
		method: type,
		//超时时间设置为10秒；
		timeout: 5000,
		//请求数据
		data: data,
		success: res => {
			//请求统一初步处理
			//登录失效，进入登录页
			if (res.data.code == "10021" || res.data.code == "10020") {
				//清除登录信息
				removeToken();
				removeName();
				removePhone();
				removeIDNum();
				removeUserId();
				uni.navigateTo({
					url: '/pages/login/LoginPage'
				});
			} else if (res.data.code == "0") {
				funSuccess(res.data.data);
			} else {
				funError(res.data.msg);
			}
		},
		fail: function(res) {
			//请求失败，根据业务提示相应信息
			funError('请求失败，请稍后再试！');
		},
		complete: () => {
			//除去网络请求弹框（接口调用结束的回调函数调用成功、失败都会执行，所以在此处取消弹框）
			if (hideLoading) {
				uni.hideLoading();
			}
		}
	});
}

2.上述代码中用到的用户信息工具类

/* 用户信息操作 */
/* token */
const TokenKey = 'Admin-Token'
/* 获取token */
export function getToken() {
	return uni.getStorageSync(TokenKey)
}
/* 保存token */
export function setToken(token) {
	return uni.setStorageSync(TokenKey, token)
}
/* 清除token */
export function removeToken() {
	return uni.removeStorageSync(TokenKey)
}

/* 手机号 */
const PhoneKey = 'Admin-Phone'
/* 获取phone */
export function getPhone() {
	return uni.getStorageSync(PhoneKey)
}
/* 保存phone */
export function setPhone(phone) {
	return uni.setStorageSync(PhoneKey, phone)
}
/* 清除phone */
export function removePhone() {
	return uni.removeStorageSync(PhoneKey)
}
/* 姓名 */
const NameKey = 'Admin-Name'
/* 获取name */
export function getName() {
	return uni.getStorageSync(NameKey)
}
/* 保存name */
export function setName(name) {
	return uni.setStorageSync(NameKey, name)
}
/* 清除name */
export function removeName() {
	return uni.removeStorageSync(NameKey)
}
/* 身份证号 */
const IDNumKey = 'Admin-IDNum'
/* 获取IDNum */
export function getIDNum() {
	return uni.getStorageSync(IDNumKey)
}
/* 保存IDNum */
export function setIDNum(iDNum) {
	return uni.setStorageSync(IDNumKey, iDNum)
}
/* 清除IDNum */
export function removeIDNum() {
	return uni.removeStorageSync(IDNumKey)
}
/* 用户id */
const UserIdKey = 'Admin-UserId'
/* 获取用户id */
export function getUserId() {
	return uni.getStorageSync(UserIdKey)
}
/* 保存用户id */
export function setUserId(userId) {
	return uni.setStorageSync(UserIdKey, userId)
}
/* 清除用户id */
export function removeUserId() {
	return uni.removeStorageSync(UserIdKey)
}

3.代码使用

导入引用request.js

import {
	requestPost
} from '../../utils/request.js'

在需要进入网络请求的地方使用

var data = {
	"mobile": this.mobile,
	"veriyfCode": this.code,
}
requestPost('api/login', data, this.requestSuccess, this.requestError, true);
requestSuccess(str) {},
requestError(str) {},

注意：this.requestSuccess, this.requestError是需要传入的回调方法，传值时一定不要加（）。

以上，基础简单的一个网络请求就封装好了，能够满足绝大多数业务场景。