2019-05-14

H5+APP实现异步请求远程接口通用方法

H5+APP的项目中在搭建项目框架时需要统一接口调用，因此写了一个统一的调用函数。

什么是Ajax？

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

实现原理

其实实现的较为简单，通过封装Jquery的Ajax请求方法来实现

通过HTTP GET 获取数据

/*
 * 接口获取数据通过GET
 * 通过get方法获取数据
 */
function getDataByGet(params, url) {
	var result = {
		code: -1,
		msg: '网络请求失败！'
	};
	var Url_ = url + "?token=" + getTokenStr();
	mui.ajax(url, {
		data: params,
		dataType: 'jsonp', //服务器返回json格式数据
		type: 'get', //HTTP请求类型
		timeout: 5000, //超时时间设置为5秒；
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		async: false,
		success: function(data) {
			//服务器返回响应，根据响应结果，分析是否登录成功；
			result = data;
		},
		error: function(err) {
			//异常处理；
			var err_ = {
				code: "-1",
				msg: "网络请求错误！"
			};
			mui.toast(JSON.stringify(err_));
			result = err_;
		}
	});
	return result;
}

通过HTTP POST 获取数据

/*
 * 接口获取数据通过POST
 * 通过post方法获取数据
 */
function getDataByPostSync(params, url) {
	var result = {
		code: -1,
		msg: '网络请求失败！'
	};
	var Url_ = url + "?token=" + getTokenStr();
	mui.ajax(Url_, {
		data: params,
		dataType: 'json', //服务器返回json格式数据
		type: 'POST', //HTTP请求类型
		async: true,
		timeout: 5000, //超时时间设置为5秒；		
		headers: {
			'Content-Type': 'application/json;charset=UTF-8'
		},
		contentType: "application/json",
		success: function(data) {
			//服务器返回响应，根据响应结果，分析是否登录成功；
			if(data.code == '918'){
				//账号被登陆，故推出登陆
				app.setState({});
				localStorage.setItem('ISONLINE','0');
				localStorage.setItem('TOKENINFO','');
				localStorage.setItem('TOKEN','');
				localStorage.setItem('USERID','');
				localStorage.setItem('USERDATA','');
				mui.toast('您的账号被别人登陆了，请您重新登陆！建议及时修改登陆密码！');
				mui.openWindow({
					url: '../login.html',
					id: 'login',
					show: {
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				});
			}
			result = data;
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			var err_ = {
				code: "-1",
				msg: "网络请求错误！"
			};
			mui.toast(' 错误状态 xhr.status:' + xhr.status + ' 响应状态 xhr.readyState: ' + xhr.readyState + ' 捕获的异常： ' + errorThrown);
			result = err_;
		}
	});
	return result;
}

/*
 * 接口获取数据通过POST
 * 通过post方法获取数据
 */
function getDataByPost(params, url) {
	var result = {
		code: -1,
		msg: '网络请求失败！'
	};
	var baseurl = localStorage.getItem('Url')
	var Url_ = "";
	//没有使用token的请求需要再次过滤
	if (url == baseurl + 'common/staff/send_forgetpwd_code' || url == baseurl + 'common/staff/update_pwd' ||
		url == baseurl + 'common/companylist' || url == baseurl + 'common/staffregister') {
		Url_ = url;
	} else {
		Url_ = url + "?token=" + getTokenStr();
	}
	mui.ajax(Url_, {
		data: params,
		dataType: 'json', //服务器返回json格式数据
		type: 'POST', //HTTP请求类型
		async: false,
		timeout: 5000, //超时时间设置为5秒；
		headers: {
			'Content-Type': 'application/json;charset=UTF-8'
		},
		contentType: "application/json",
		success: function(data) {
			//服务器返回响应，根据响应结果，分析是否登录成功；
			result = data;
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			var err_ = {
				code: "-1",
				msg: "网络请求错误！"
			};
			mui.toast(' 错误状态 xhr.status:' + xhr.status + ' 响应状态 xhr.readyState: ' + xhr.readyState + ' 捕获的异常： ' + errorThrown);
			result = err_;
		}
	});
	return result;
}