ajax与promise

原生js发送请求

// 格式化post提交数据
var formateParams=function(data, isCache) { 
	var arr = []; 
	for(var name in data) {  
		arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); 
	} 
	if(isCache) {  
		arr.push('v=' + (new Date()).getTime()); 
	} 
	return arr.join('&');
}
//promise 封装xhr请求数据
var ajaxPro = function(param) {
	var data = {
		username: '179999999',
		password: '666666'
	}
	return new Promise(function(resolve, reject) {
		var xhr = new XMLHttpRequest();
		xhr.open('POST', param.url, true);
		xhr.onload = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				resolve(JSON.parse(xhr.responseText));
			} else {
				params.error && params.error(status);
			}
		}
		xhr.onerror = function() {
			reject(JSON.parse(xhr.responseText));
		}
		// 非常重要，如果用post方式提交，必须加上请求头
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//只有按照这个格式，后台才能收到数据username=179999999&password=666666
		xhr.send(formateParams(data));
	})
}
// 调用示例
var p = ajaxPro({ 
	url: '' // 要获取的文件地址
});
p.then(function(response) {
	console.log(response);
}).catch(function(err) {
	console.log(err);
});
			

封装jquery的ajax方法

function loading(){
	console.log('loading');
}
function stopLoading(){
	console.log('stopLoading');
}
var ajaxPro = function(param) {
	const APIURL = '';
	var options = {
		url: APIURL + param.url,
		type: param.type || 'POST',
		data: param.data,
		before: param.before || loading,
		complete: param.complete || stopLoading
	}
	return new Promise(function(resolve, reject) {
		$.ajax({
			url: options.url,
			type: options.type,
			data: options.data,
			beforeSend: options.before,
			complete: options.complete,
			success: function(data) {
				resolve(data);
			},
			error: function(jqXHR, textStatus, errorThrown) {
			/**第一个参数
			*readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成
			*status  ：返回的HTTP状态码，比如常见的404,500等错误代码。
			*statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
			*responseText ：服务器响应返回的文本信息
			*/ 
			
			/**第二个参数返回的状态
			*"timeout"（超时）, "error"（错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值
			*字符串类型，表示服务器抛出返回的错误信息
			*/
			    var errInfo = {
			        jqXHR:jqXHR,
			        textStatus:textStatus,
			        errorThrown:errorThrown
			    }
				reject(errInfo)
			}
		});
	});
};
// 调用示例
var p2 = ajaxPro({
	url: '/Home/User/login',
	data: {
		username: "17999999999",
		password: '666666'
	}
}).then(function(data) {
	console.log(data);
}).catch(function(err) {
	console.log(err);
});

封装mui.ajax

var appUI = {
	showWaiting: function() {
		plus.nativeUI.showWaiting();
	},
	closeWaiting: function() {
		plus.nativeUI.closeWaiting()
	}
}

function request(parm) {
	// 参数MD5加密
	return new Promise(function(resolve, reject) {
	    // 接口域名
		const APIURL = '';
		var options = {
			type: param.type || 'POST',
			url:APIURL+param.url||'',
			data: param.data,
			dataType: param.dataType || 'json',
			timeout:param.timeout||60000,
			before: param.before || appUI.showWaiting,
			complete: param.complete || appUI.closeWaiting
		}
		mui.ajax(options.url, {
			data: options.data,
			dataType: options.dataType, //要求服务器返回json格式数据
			type: options.type, //HTTP请求类型，要和服务端对应，要么GET,要么POST
			timeout: options.timeout, //超时时间设置为6秒；
			beforeSend: options.before,
			complete: options.complete,
			success: function(data) {
				options.complete();
				if(data && data.code && data.code != undefined) {
					resolve(data);
				} else {
					mui.toast("服务器繁忙,请稍后再试");
				}
			},
			error: function(xhr, type, errorThrown) {
				// type：错误描述，类型是String，可取值除了'null'外，其它可能值："timeout", "error", "abort", "parsererror" 
				options.complete();
				if(type == 'timeout' || type == 'abort') {
					mui.toast("请求超时：请检查网络：" + type)
				} else {
					mui.toast("服务器累了：" + type)
				}
				 var errInfo = {
			        xhr:xhr,
			        type:type,
			        errorThrown:errorThrown
			    }
				reject(errInfo)
			}
		});
	})

}

参考博客

ajax
promise改写ajax
promise改写ajax
ajax博客园