es6 --- > 用promise对象实现Ajax操作的一个实例

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