同步編程通常來說易於調試和維護，然而，異步編程通常能獲得更好的性能和更大的靈活性。異步的最大特點是無需等待。 “Promises”漸漸成為JavaScript裡最重要的一部分，大量的新API都開始promise原理實現。下面讓我們看一下什麼是promise，以及它的API和用法！
Promises現狀
XMLHttpRequest API是異步的，但它沒有使用promise API。但有很多原生的javascript API 使用了promise：
*Battery API
*fetch API (XHR的替代品)
*ServiceWorker API
Promises將來只會變得越來越流行、普遍，非常重要，所有的前端開發人員都將用到它。另一個值得注意的是，Node.js是基於Promises的平台(很顯然，Promise是它的一個核心特徵)。
Promises的用法比你想像的要簡單――如果你以前喜歡使用setTimeout來控制異步任務的話！
Promise基本用法
new Promise()構造器可以用在傳統的異步任務中，就像以前setTimeout 和XMLHttpRequest 的用法一樣。一個新的Promise 使用new 關鍵字生成，同時，這個Promises 提供了resolve 和reject 函數讓我們執行回調操作：
var p = new Promise(function(resolve, reject) { // Do an async task async task and then... if(/* good condition */) { resolve('Success!'); } else { reject('Failure!'); }});p.then(function() { /* do something with the result */}).catch(function() { /* error */})程序員可以手動的在回調函數內部根據執行情況調用resolve 和reject 函數。下面是一個比較具有現實意義的例子，它將一個XMLHttpRequest 調用轉換為基於Promises 的任務：
// From Jake Archibald's Promises and Back:// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequestfunction get(url) { // Return a new promise. return new Promise(function(resolve, reject) { // Do the usual XHR stuff var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { // This is called even on 404 etc // so check the status if (req.status == 200) { // Resolve the promise with the response text resolve(req.response); } else { // Otherwise reject with the status text // which will hopefully be a meaningful error reject(Error(req.statusText)); } }; // Handle network errors req.onerror = function() { reject(Error("Network Error")); }; // Make the request req.send(); });}// Use it!get('story.json').then(function(response) { console.log("Success!", response);}, function(error) { console.error("Failed!", error);});Promise.resolve() 和Promise.reject() 可以直接被調用。有時候，當判斷出promise 並不需要真正執行時，我們並不需要使用new 創建Promise 對象，而是可以直接調用Promise.resolve() 和Promise.reject()。比如：
var userCache = {};function getUserDetail(username) { // In both cases, cached or not, a promise will be returned if (userCache[username]) { // Return a promise without the "new" keyword return Promise.resolve(userCache[username]); } // Use the fetch API to get the information // fetch returns a promise return fetch('users/' + username + '.json') .then(function(result) { userCache[username] = result; return result; }) .catch(function() { throw new Error('Could not find user: ' + username); });}因為promise 肯定會返回，所以，我們可以使用then 和catch 方法處理返回值！
then 方法
所有的promise 對象實例裡都有一個then 方法，它是用來跟這個promise 進行交互的。首先，then 方法會缺省調用resolve() 函數:
new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve(10); }, 3000);}).then(function(result) { console.log(result);});// From the console:// 10then 回調動作的觸發時機是promise 被執行完。我們還可以串聯then 方法執行回調操作：
new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve(10); }, 3000);}).then(function(num) { console.log('first then: ', num); return num * 2; }).then(function(num) { console.log('second then: ', num); return num * 2; }).then(function(num) { console.log('last then: ', num);});// From the console:// first then: 10// second then: 20// last then: 40你會發現，每次then 調用都會以之前的then 調用的返回值為參數。
如果一個promise 已經執行完成，單then 被再次調用時，回調動作將會被再次執行。而如果這個promise 裡執行的是reject 回調函數，這是再調用then 方法，回調函數將不會被執行。
catch 方法
catch 當一個promise 被拒絕(reject)時,catch 方法會被執行：
new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { reject('Done!'); }, 3000);}).then(function(e) { console.log('done', e); }).catch(function(e) { console.log('catch: ', e); });// From the console:// 'catch: Done!'通常我們在reject 方法里處理執行失敗的結果，而在catch 裡執行異常結果：
reject(Error('Data could not be found'));
Promise.all方法
在我們的異步調用時經常有這樣一種場景：我們需要同時調用多個異步操作，但希望只有等所有的操作都完成後，我們才去執行響應操作――這就是Promise.all 的作用。 Promise.all 方法可以接收多個promise 作為參數，以數組的形式，當這些promise 都成功執行完成後才調用回調函數。
Promise.all([promise1, promise2]).then(function(results) { // Both promises resolved}).catch(function(error) { // One or more promises was rejected});一個很好的能演示Promise.all 用法的例子是，執行多個AJAX 操作(通過fetch) 調用:
var request1 = fetch('/users.json');var request2 = fetch('/articles.json');Promise.all([request1, request2]).then(function(results) { // Both promises done!});我們還可將fetch和電池狀態API混合一起執行，因為它們返回的都是promise：
Promise.all([fetch('/users.json'), navigator.getBattery()]).then(function(results) { // Both promises done!});一旦promise 裡調用了reject函數，也就是執行被拒絕了，沒有能夠正常完成，情況會有些複雜。一旦promise 被拒絕，catch 方法會捕捉到首個被執行的reject函數：
var req1 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('First!'); }, 4000);});var req2 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { reject('Second!'); }, 3000);});Promise.all([req1, req2]).then(function(results) { console.log('Then: ', one);}).catch(function(err) { console.log('Catch: ', err);});// From the console:// Catch: Second!Promise.all 是非常重要的接口，將會在很多新誕生的promise API中扮演重要的作用。
Promise.race
Promise.race 是一個有趣的函數――它不是等待所有的promise 被resolve 或reject，而是在所有的promise 中只要有一個執行結束，它就會觸發：
var req1 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('First!'); }, 8000);});var req2 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('Second!'); }, 3000);});Promise.race([req1, req2]).then(function(one) { console.log('Then: ', one);}).catch(function(one, two) { console.log('Catch: ', one);});// From the console:// Then: Second!一個有用的場景是，從多個鏡像服務器下載資源，一旦有一個返回，其它的返回也就不用處理了。
學會使用Promises
Promises在過去幾年是一個非常火爆的話題，它甚至從JavaScript裡抽離出來變成了一個語言架構。相信很快我們將見到有愈來愈多的JavaScript API將使用以promise為基礎的模式。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。