首先回顧一下Ajax請求的步驟
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();// 注:onreadystatechange,是Ajax請求狀態(readyStatus)改變時執行的函數..
// 使用GET方法獲取給定url下的json格式,
再回顧一下工廠模式:
function createPerson(name, age, job) {var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function() {alert(this.name);};return o;
}
var person1 = createPerson("Nicholas", 29 ,"Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
// 注: 用函數來封裝了創建對象的具體細節,再創建實例時,可以直接使用createPerson + 參數的形式
下面是用Promise封裝該請求,并提供一個友好接口的例子:
var getJSON = function(url) {var promise = new Promise(function(resolve, reject) {var client = new XMLHttpRequest();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequesHeader("Accept", "application/json");client.send();function handler() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};});return promise;
};// 調用getJSON
getJSON("/posts.json").then(function(json) {console.log('Contents: ' + json);
}, function(error) {console.error('出錯了', error);
});// 注: 用工廠模式,在getJSON函數里面首先創建了一個Promise實例,然后利用創建Ajax請求,最后返回該實例.調用時直接使用getJSON
// (url)即可
// promise實例中的resolve和 reject方法,來自于調用時候的 .then里面的2個參數,第一個參數對應resolve,第二個參數對應reject
參考《ES6標準入門》(第3版)P276
參考《JavaScript高級程序設計》(第3版) P144