'async'
var promise = get('data/tweet.json'); // promise 是一個(gè)將來會(huì)發(fā)生事情的占位符那婉，

promise.then(function (tweet) { // 狀態(tài) OK 后執(zhí)行 then 里的回調(diào)函數(shù)
    console.log(tweet);
}).then(function (friend) {
    console.log(friend);
}).then(function (video) {
    console.log(video);
}).catch(function (error) {
    console.log(error);
});

你可能會(huì)想為什么這種寫法比常規(guī)的回調(diào)函數(shù)好板甘，因?yàn)?then 和 catch 里的畢竟還是回調(diào)函數(shù)党瓮，實(shí)際上更好的是當(dāng)我們需要寫多個(gè)異步請(qǐng)求我們可以以鏈?zhǔn)綄懛▉磉B接這幾個(gè)異步請(qǐng)求详炬。

'async'
promise.then(function (tweet) {
    console.log(tweet);

    return get('data/friend.json'); // return 的內(nèi)容將會(huì)以下一個(gè) then 回調(diào)函數(shù)中的參數(shù)出現(xiàn)
}).then(function (friend) {
    console.log(friend);

    return get('data/video.json');
}).then(function (video) {
    console.log(video);
}).catch(function (error) {
    console.log(error);
});

這種寫法比起嵌套回調(diào)函數(shù)看起來好多了，是更優(yōu)雅的處理回調(diào)函數(shù)的方式寞奸。

了解 Promise

下面來了解 get 方法究竟在做什么：

• get 方法的 url 參數(shù)是我們需要請(qǐng)求數(shù)據(jù)的 url
• 返回一個(gè) Promise 對(duì)象
• Promise 對(duì)象有 resolve 和 reject 函數(shù)
  • resolve 是成功時(shí)候會(huì)執(zhí)行的函數(shù)呛谜，函數(shù)的參數(shù)會(huì)返回到 then 的回調(diào)函數(shù)的參數(shù)
  • reject 是失敗時(shí)候會(huì)執(zhí)行的函數(shù)，函數(shù)的參數(shù)會(huì)返回到 catch 的回調(diào)函數(shù)的參數(shù)
• 在 Promise 的回調(diào)函數(shù)體里枪萄，是第一節(jié)課創(chuàng)建 ajax 請(qǐng)求的代碼

以上就是創(chuàng)建 Promise 的過程隐岛。

'async.js'
function get(url) {
    return new Promise(function (resolve, reject) {
        var http = new XMLHttpRequest();

        http.open('get', url, true);

        http.onload = function () { // 如果瀏覽器支持 Promise 也會(huì)支持 onloady 與 onerror 方法
            if (http.status === 200) {
                resolve(JSON.parse(http.response)); // 當(dāng)狀態(tài)碼 200，執(zhí)行 resolve 方法瓷翻，返回響應(yīng)內(nèi)容
            } else { // 否則執(zhí)行 reject 方法聚凹，返回錯(cuò)誤信息
                reject(http.statusText);
            }
        };

        http.onerror = function () { // 出其他錯(cuò)誤同樣執(zhí)行 reject 方法，返回錯(cuò)誤信息
            reject(http.statusText);
        };

        http.send();
    });
}

jQuery 的 Promise

實(shí)際上如今的 jQuery 也實(shí)現(xiàn)了 Promise齐帚，上面例子主要是介紹 Promise 的背景與內(nèi)里的工作原理妒牙，便于學(xué)習(xí)理解。

利用 jQuery 的 Promise 特性發(fā)起多個(gè)請(qǐng)求：

'async.js'
$.get('data/tweet.json').then(function(tweet){
    console.log(tweet);

    return $.get('data/friend.json');
}).then(function (friend) {
    console.log(friend);

    return $.get('data/video.json');
}).then(function (video) {
    console.log(video);
}).catch(function (error) {
    console.log(error);
});

跟上節(jié)課的 $.get 使用回調(diào)方式發(fā)起三次請(qǐng)求對(duì)比对妄，看起來更容易維護(hù)與整潔(抽象了回調(diào)函數(shù)的代碼)湘今，有點(diǎn)像同步代碼。