使用promise封装Ajax

实现 Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：

1. 创建 Ajax的核心对象 XMLHttpRequest对象
2. 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
3. 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
4. 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端通信状态
5. 接受并处理服务端向客户端响应的数据结果
6. 将处理结果更新到 HTML页面中

promise实现http的get请求：

function myAjax(method,url,data){
	return new Promise(function(resolve,reject){
		//确定method和data
		var method = method||'GET';
		var data = data ||null;
		//1. 创建XMLHttpRequest对象
		let xml = new XMLHttpRequest();
		//2. 新建一个get请求
		xml.open(method,url,true);
		//3. 发送请求
		xml.send(data);	
		//4. 监听通信状态
		xml.onreadystateChange = function(){
			if(xml.readyState!==4) return;
			if(xml.readyState===4 &&xml.state ===200){
				resolve(xml.response);
			}else{
				reject(new Error(xml.statusText));
			}
		}		
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用:

myAjax('GET','/person/url.json',null).then(result=>{
	console.log(result);
})
1
2
3