Promise 封装 原生 Ajax

一、先上代码，手撕

function Ajax(url, method, data) {
    let promise = new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.response);
                } else {
                    reject(new Error("error"));
                }
            }
        }
        if (method.toUpperCase() === "GET") {
            let paramsList = [];
            for (let key in data) {
                paramsList.push(key + "=" + data[key]);
            }
            let params = paramsList.join("&");
            url = url + "?" + params;
            xhr.open("get", url, false);
            xhr.send();
        }
        else if (method.toUpperCase() === "POST") {
            xhr.open("post", url, false);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
            xhr.send(data);
        }
    })
    return promise;
}

二、步骤

• new 一个 XMLHttpRequest 对象，众所周知 ajax 是对其功能的封装

  如果要求兼容低版本 ie 的话，可能就没有 window 对象了，那么就需要：

  if (Window.XMLHttpRequest){
      XHR=new XMLHttpRequest();
  } else {
      XHR=new ActiveXObject("Microsoft.XMLHTTP");
  }
  

• 使用 open 方法，连接服务器

  open(method, url, async)
  method：请求的模式 GET、POST、DELETE、PUT
  url：统一资源定位符
  async：true 同步请求，false 异步请求

• 使用 onreadystatechange 对状态进行监控

  readyStatus 的值：
  0：未初始化
  1：启动；已经调用open()方法，但尚未调用send()方法。
  2：发送；已经调用send()方法，但尚未接收到相应。
  3：接收；已经收到部分响应数据。
  4：完成；已经收到全部响应数据，而且已经可以在客户端使用了
  status 状态码
  根据状态码做出相应的处理 （200 成功）
  

• 使用 send 方法发送请求