Promise 简单封装Ajax

get请求

function getJSON (url) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function () {
        	// xhr 为 this
        	var resJson;
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(this.responseText, this);
                } else {
                    resJson = { code: this.status, response: this.response };
                    reject(resJson, this);
                }
            }
        }
        xhr.send();
    })；
}

Post请求

function postJSON(url, data) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
        	var resJson;
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText), this);
                } else {
                    resJson = { code: this.status, response: this.response };
                    reject(resJson, this);
                }
            }
        }
        xhr.send(JSON.stringify(data));
    })
}

调用实例

var test = getJSON(url);
test.then(function(response){
	console.log("success");
 }).catch(function(err) {
    console.log(err);
});

其中

if (window.XMLHttpRequest) {
	// code for all new browsers
  	xml=new XMLHttpRequest();
} else if (window.ActiveXObject) {
	// code for IE5 and IE6
  xml=new ActiveXObject("Microsoft.XMLHTTP");
}

readyState：
0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件尚未开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
4-COMPLETED：文件已完全加载，代表加载成功