Promise小試牛刀

promise用於ajax封裝請求

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest對象用於在後臺與服務器交換數據   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4說明請求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 從服務器獲得數據 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat應爲'a=a1&b=b1'這種字符串格式，在jq裏如果data爲對象會自動將對象轉成這種字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http頭，發送信息至服務器時內容編碼類型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

//  promise 封裝
// 封裝一個get請求的方法
function ajaxPromise(url) {
    return new Promise(function (resolve, reject) {
        var XHR = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');

        XHR.onreadystatechange = function () {
            //readyState屬性表示請求/響應過程的當前活動階段。
            if (XHR.readyState == 4) {
                if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
                    try {
                        //獲取數據
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error("Request was unsuccessful: " + XHR.statusText));
                }
            }
        }
        XHR.open('GET', url + '?' + params.join('&'), true);
        XHR.send(null);
    })
}

優點：便於集成、擴展
注意：

new Promise 實例，必須要 return
new Promise 時要傳入函數，函數有 resolve reject 兩個參數
成功時執行 resolve()
失敗時執行 reject()