Promise
在JavaScript的世界中滑臊，所有代碼都是單線程執(zhí)行的口芍。
由于這個“缺陷”，導致JavaScript的所有網(wǎng)絡操作鬓椭，瀏覽器事件关划，都必須是異步執(zhí)行。異步執(zhí)行可以用回調函數(shù)實現(xiàn)：
functioncallback(){console.log('Done');}console.log('before setTimeout()');setTimeout(callback,1000);// 1秒鐘后調用callback函數(shù)console.log('after setTimeout()');
觀察上述代碼執(zhí)行祭玉，在Chrome的控制臺輸出可以看到：
before setTimeout()
after setTimeout()
(等待1秒后)
Done
可見，異步操作會在將來的某個時間點觸發(fā)一個函數(shù)調用岛都。
AJAX就是典型的異步操作振峻。以上一節(jié)的代碼為例：
request.onreadystatechange =function(){if(request.readyState ===4) {if(request.status ===200) {returnsuccess(request.responseText);? ? ? ? }else{returnfail(request.status);? ? ? ? }? ? }}
把回調函數(shù)success(request.responseText)和fail(request.status)寫到一個AJAX操作里很正常，但是不好看扣孟，而且不利于代碼復用。
有沒有更好的寫法鸽斟？比如寫成這樣：
varajax = ajaxGet('http://...');ajax.ifSuccess(success)? ? .ifFail(fail);
這種鏈式寫法的好處在于利诺，先統(tǒng)一執(zhí)行AJAX邏輯，不關心如何處理結果慢逾，然后，根據(jù)結果是成功還是失敗口注，在將來的某個時候調用success函數(shù)或fail函數(shù)君珠。
古人云：“君子一諾千金”，這種“承諾將來會執(zhí)行”的對象在JavaScript中稱為Promise對象。
Promise有各種開源實現(xiàn)澈段，在ES6中被統(tǒng)一規(guī)范悠菜，由瀏覽器直接支持败富。先測試一下你的瀏覽器是否支持Promise：
'use strict';
new Promise(function () {});
Run
我們先看一個最簡單的Promise例子：生成一個0-2之間的隨機數(shù)摩窃，如果小于1，則等待一段時間后返回成功鹦聪，否則返回失數倜亍：
functiontest(resolve, reject){vartimeOut = Math.random() *2;??
? log('set timeout to: '+ timeOut +' seconds.');? ?
? ?setTimeout(function(){if(timeOut <1) { ? ? ? ? ?
? ? ? ? ? ? log('call resolve()...');? ? ? ? ?
? ? ? ? ? ? ? ?resolve('200 OK');? ? ? ? }else{?
? ? ? ? ? ? ? ? log('call reject()...'); ? ? ? ? ? ?
? ? ? ? ? ? ? reject('timeout in '+ timeOut +' seconds.');? ? ? ? }? ? },?
? ? ? ? ? ? ? ?timeOut *1000);}
這個test()函數(shù)有兩個參數(shù)，這兩個參數(shù)都是函數(shù)规丽，如果執(zhí)行成功，我們將調用resolve('200 OK')赌莺，如果執(zhí)行失敗松嘶，我們將調用reject('timeout in ' + timeOut + ' seconds.')〕惨簦可以看出尽超，test()函數(shù)只關心自身的邏輯，并不關心具體的resolve和reject將如何處理結果橙弱。
有了執(zhí)行函數(shù)，我們就可以用一個Promise對象來執(zhí)行它斜筐，并在將來某個時刻獲得成功或失敗的結果：
varp1 =newPromise(test);varp2 = p1.then(function(result){console.log('成功：'+ result);});varp3 = p2.catch(function(reason){console.log('失斨臁：'+ reason);});
變量p1是一個Promise對象，它負責執(zhí)行test函數(shù)屈梁。由于test函數(shù)在內部是異步執(zhí)行的榛了，當test函數(shù)執(zhí)行成功時煞抬，我們告訴Promise對象：
// 如果成功，執(zhí)行這個函數(shù)：p1.then(function(result){console.log('成功：'+ result);});
當test函數(shù)執(zhí)行失敗時战坤，我們告訴Promise對象：
p2.catch(function(reason){console.log('失敳泄铡：'+ reason);});
Promise對象可以串聯(lián)起來，所以上述代碼可以簡化為：
newPromise(test).then(function(result){console.log('成功：'+ result);}).catch(function(reason){console.log('失斈也贰：'+ reason);});
實際測試一下错沃，看看Promise是如何異步執(zhí)行的：
'use strict';
// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
logging.removeChild(logging.children[logging.children.length - 1]);
}
// 輸出log到頁面:
function log(s) {
var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
可見Promise最大的好處是在異步執(zhí)行的流程中，把執(zhí)行代碼和處理結果的代碼清晰地分離了：
romise還可以做更多的事情笑窜，比如登疗，有若干個異步任務，需要先做任務1辐益，如果成功后再做任務2，任何任務失敗則不再繼續(xù)并執(zhí)行錯誤處理函數(shù)认罩。
要串行執(zhí)行這樣的異步任務续捂，不用Promise需要寫一層一層的嵌套代碼。有了Promise牙瓢，我們只需要簡單地寫：
job1.then(job2).then(job3).catch(handleError);
其中，job1页慷、job2和job3都是Promise對象。
下面的例子演示了如何串行執(zhí)行一系列需要異步計算獲得結果的任務：
'use strict';
var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
logging.removeChild(logging.children[logging.children.length - 1]);
}
function log(s) {
var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
Run
Log:
setTimeout可以看成一個模擬網(wǎng)絡等異步執(zhí)行的函數(shù)∽艺茫現(xiàn)在州袒，我們把上一節(jié)的AJAX異步執(zhí)行函數(shù)轉換為Promise對象，看看用Promise如何簡化異步處理：
'use strict';
// ajax函數(shù)將返回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);
});
}
Run
Result:
除了串行執(zhí)行若干異步任務外洗做，Promise還可以并行執(zhí)行異步任務彰居。
試想一個頁面聊天系統(tǒng)撰筷，我們需要從兩個不同的URL分別獲得用戶的個人信息和好友列表，這兩個任務是可以并行執(zhí)行的毕籽，用Promise.all()實現(xiàn)如下：
varp1 =newPromise(function(resolve, reject){setTimeout(resolve,500,'P1');});varp2 =newPromise(function(resolve, reject){setTimeout(resolve,600,'P2');});// 同時執(zhí)行p1和p2，并在它們都完成后執(zhí)行then:Promise.all([p1, p2]).then(function(results){console.log(results);// 獲得一個Array: ['P1', 'P2']});
有些時候溶握，多個異步任務是為了容錯蒸播。比如，同時向兩個URL讀取用戶的個人信息袍榆，只需要獲得先返回的結果即可。這種情況下宿崭，用Promise.race()實現(xiàn)：
varp1 =newPromise(function(resolve, reject){setTimeout(resolve,500,'P1');});varp2 =newPromise(function(resolve, reject){setTimeout(resolve,600,'P2');});Promise.race([p1, p2]).then(function(result){console.log(result);// 'P1'});
由于p1執(zhí)行較快才写，Promise的then()將獲得結果'P1'。p2仍在繼續(xù)執(zhí)行讹堤，但執(zhí)行結果將被丟棄。
如果我們組合使用Promise蜕劝，就可以把很多異步任務以并行和串行的方式組合起來執(zhí)行。
