使用Promise封装ajax

1.Ajax介绍

Ajax是对Asynchronous JavaScript And XML的简写，通过Ajax可以向服务器请求额外的数据而无须卸载页面，带来更好的用户体验。

步骤

首先，通过new XMLHttpRequest创建一个xhr对象。
根据get方法和post方法进行数据请求，在使用这个xhr对象时，要调用的第一个方法是open()

xhr.open("get",url,false)

调用open并不会真正的发送请求，只是启动一个请求以备发送。

发送请求时调用send()方法

xhr.send(data);//对应post方法
xhr.send(null);//对应get方法

send方法接受一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据最好传入null。

如果仅仅是同步请求，接下来就可以根据xhr.status属性来判断数据请求情况。status就是响应的HTTP状态码。注意304这一特殊状态码。

多数情况下我们希望发送异步请求。

为了让javascript代码继续执行，不必等待响应，我们可以检测xhr对象的readyState属性。该属性表示请求的当前活动状态。

0:未初始化;并未调用open()方法
1:启动;调用了open但是尚未调用send方法
2:发送;调用来send方法，但尚未接收到响应
3:接收到部分响应
4:完成;接收到所有响应数据，可以在网页中使用

只要readyState发生一次改变，就会触发一次readystatechange事件，所以可以监听该事件来检测每次变化后的readyState值，而我们仅仅只是关注readyState值为4的情况。

所以在调用open()前指定onreadystatechange事件处理程序。

function myAjax(url,method,data){
    let promise = new Promise((resolve,reject) => {
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if((xhr.status >= 200 && xhr.status < 300)||xhr.status === 304){
                    resolve(xhr.response)
                }else{
                    reject(new Error("error"))
                }
            }
        }
        if(method.toUpperCase() === "GET"){
           let paramslist = [];
           for(key in data){
               paramslist.push(key + "=" + data[key])
           }
           //根据get请求方法对url进行拼接
           let params = paramslist.join("&");
           url = url + "?" + params;
           xhr.open("get",url,false);
           //使用get请求将内容连接在url后面
           xhr.send()

        }
        if(method.toUpperCase() === "POST"){
            xhr.open("post", url, false);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
            xhr.send(data);
            //使用post请求时将内容放在send里面
        }

    })
    return promise
}

关于post请求

在发送post数据的时候，数据放在body里面，并且可以发送很多类型的的数据，所以在这种情况下Content-Type将会非常重要，直接影响着服务器如何来解析你发送的数据。 GET 请求不存在请求实体部分，键值对参数放置在 URL 尾部，因此请求头不需要设置 Content-Type 字段。