首先回顾一下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