JavaScript复习笔记 （十）Promise

Promise对象: 承诺将来会执行

new Promise(function (resolve, reject) {
    //TODO
}).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});

1. Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
2. 串行执行异步任务

// job1、job2和job3都是Promise对象
job1.then(job2).then(job3).catch(handleError);

3. 并行执行异步任务

• 试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()

// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

• （容错）同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()

Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

Promise处理AJAX异步执行

// ajax函数将返回Promise对象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}

var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，获得响应内容
    log.innerText = text;
}).catch(function (status) { // 如果AJAX失败，获得响应代码
    log.innerText = 'ERROR: ' + status;
});