js 原生ajax封装(promise)

/*** ajax数据请求接口
  	@param {string} type 请求方式 {"get(默认)" | "GET" | "post" | "POST"}
 	@param {string} url 请求接口地址
  	@param {Object} data 请求时后台所需参数
  	@param {bool} async 是否异步(true)或同步(false)请求{true(默认) | false}	  	
  	@example: $ajax({
  					type: "post", 
  					url: "", 
  					data: {}
  				}).then(function(ret){
  				
  				}).then(function(err){
  				
  				});
*/
var $ajax = function({type, url, data, async}){
	// 异步对象
	var ajax;		
	window.XMLHttpRequest ? ajax =new XMLHttpRequest() : ajax=new ActiveXObject("Microsoft.XMLHTTP");
	!type ? type = "get" : type = type;
	!data ? data = {} : data = data;
	async != false ? !async ? async = true : async = async : '';
	return new Promise(function(resolve,reject){
		// get 跟post  需要分别写不同的代码
		if (type.toUpperCase()=== "GET") 
		{// get请求
			if (data) {// 如果有值
				url += '?';										
				if( typeof data === 'object' )
				{ // 如果有值 从send发送
					var convertResult = "" ;
					for(var c in data){
						convertResult += c + "=" + data[c] + "&";
					}						
					url += convertResult.substring(0,convertResult.length-1);
				}
				else
				{
					url += data;
				}
			}
			ajax.open(type, url, async); // 设置 方法 以及 url
			ajax.send(null);// send即可
		}
		else if(type.toUpperCase()=== "POST")
		{// post请求
			ajax.open(type, url); // post请求 url 是不需要改变
			ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 需要设置请求报文
			if(data)
			{ // 判断data send发送数据
				if( typeof data === 'object' ){// 如果有值 从send发送
					var convertResult = "" ;
					for(var c in data){
					  convertResult += c + "=" + data[c] + "&";
					}
					convertResult = convertResult.substring(0,convertResult.length-1);
					ajax.send(convertResult);
				}else{
					ajax.send(data);
				}
			} else
			{
				ajax.send(); // 木有值 直接发送即可
			}
		}
		// 注册事件
		ajax.onreadystatechange = function () {
			// 在事件中 获取数据 并修改界面显示
			if (ajax.readyState == 4)
			{
				if(ajax.status===200)
				{ // 返回值: ajax.responseText;
					if(ajax.response && typeof ajax.response != 'object'){
						resolve(JSON.parse(ajax.response));							
					}
					else{
						resolve(ajax.response);
					}
				}
				else
				{
					reject(ajax.status);
				}
			}
		}
	});		
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风如白话

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值