想像一下，callback() 已準備好執行，當 pow() 完成時，調用堆棧(Call Stack) 為空，事件循環(Event Look) 將 callback() 放入調用堆中。大概就是這樣，如果你理解了上面的插圖，那麼你就可以理解所有的JavaScript了。

回調地獄和 ES6 中的Promises

JS 中回調函數無處不在，它們用於同步和非同步代碼。 考慮如下map方法：

function mapper(element){
return element * 2;
}
[1, 2, 3, 4, 5].map(mapper);


mapper是一個在map內部傳遞的回調函數。上面的代碼是同步的，考慮非同步的情況：

function runMeEvery(){
console.log(Ran!);
}
setInterval(runMeEvery, 5000);


該代碼是非同步的，我們在setInterval中傳遞迴調runMeEvery。回調在JS中無處不在，因此就會出現了一個問題:回調地獄。

JavaScript 中的回調地獄指的是一種編程風格，其中回調嵌套在回調函數中，而回調函數又嵌套在其他回調函數中。由於 JS 非同步特性，js 程序員多年來陷入了這個陷阱。

說實話，我從來沒有遇到過極端的回調金字塔，這可能是因為我重視可讀代碼，而且我總是堅持這個原則。如果你在遇到了回調地獄的問題，說明你的函數做得太多。

這裡不會討論回調地獄，如果你好奇，有一個網站，callbackhell.com，它更詳細地探索了這個問題，並提供了一些解決方案。

我們現在要關注的是ES6的 Promises。ES6 Promises是JS語言的一個補充，旨在解決可怕的回調地獄。但什麼是 Promises 呢?

JS的 Promise是未來事件的表示。 Promise 可以以成功結束：用行話說我們已經解決了resolved(fulfilled)。 但如果 Promise 出錯，我們會說它處於拒絕(rejected )狀態。 Promise 也有一個默認狀態：每個新的 Promise 都以掛起(pending)狀態開始。

創建和使用 JavaScript 的 Promises

要創建一個新的 Promise，可以通過傳遞迴調函數來調用 Promise 構造函數。回調函數可以接受兩個參數:resolve和reject。如下所示：

const myPromise = new Promise(function(resolve){
setTimeout(function(){
resolve()
}, 5000)
});


如下所示，resolve是一個函數，調用它是為了使Promise 成功，別外也可以使用 reject 來表示調用失敗。

const myPromise = new Promise(function(resolve, reject){
setTimeout(function(){
reject()
}, 5000)
});


注意，在第一個示例中可以省略reject，因為它是第二個參數。但是，如果打算使用reject，則不能忽略resolve，如下所示，最終將得到一個resolved 的承諾，而非 reject。

// 不能忽略 resolve !
const myPromise = new Promise(function(reject){
setTimeout(function(){
reject()
}, 5000)
});


現在，Promises看起來並不那麼有用，我們可以向它添加一些數據，如下所示：

const myPromise = new Promise(function(resolve) {
resolve([{ name: "Chris" }]);
});


但我們仍然看不到任何數據。 要從Promise中提取數據，需要鏈接一個名為then的方法。 它需要一個回調來接收實際數據：

const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then(function(data) {
console.log(data);
});


Promises 的錯誤處理

對於同步代碼而言，JS 錯誤處理大都很簡單，如下所示：

function makeAnError() {
throw Error("Sorry mate!");
}
try {
makeAnError();
} catch (error) {
console.log("Catching the error! " + error);
}


將會輸出：

Catching the error! Error: Sorry mate!

現在嘗試使用非同步函數：

function makeAnError() {
throw Error("Sorry mate!");
}
try {
setTimeout(makeAnError, 5000);
} catch (error) {
console.log("Catching the error! " + error);


由於setTimeout，上面的代碼是非同步的，看看運行會發生什麼：

throw Error("Sorry mate!");
^
Error: Sorry mate!
at Timeout.makeAnError [as _onTimeout] (/home/valentino/Code/piccolo-javascript/async.js:2:9)

這次的輸出是不同的。錯誤沒有通過catch塊，它可以自由地在堆棧中向上傳播。

那是因為try/catch僅適用於同步代碼。 如果你很好奇，Node.js中的錯誤處理會詳細解釋這個問題。

幸運的是，Promise 有一種處理非同步錯誤的方法，就像它們是同步的一樣：

const myPromise = new Promise(function(resolve, reject) {
reject(Errored, sorry!);
});


在上面的例子中，我們可以使用catch處理程序處理錯誤：

const myPromise = new Promise(function(resolve, reject) {
reject(Errored, sorry!);
});
myPromise.catch(err => console.log(err));


我們也可以調用Promise.reject()來創建和拒絕一個Promise

Promise.reject({msg: Rejected!}).catch(err => console.log(err));


Fundebug可以自動捕獲JavaScript錯誤，包括Promise錯誤，歡迎免費試用~

Promises 組合：Promise.all，Promise.allSettled， Promise.any

Promise API 提供了許多將Promise組合在一起的方法。 其中最有用的是Promise.all，它接受一個Promises數組並返回一個Promise。 如果參數中 promise 有一個失敗（rejected），此實例回調失敗（reject），失敗原因的是第一個失敗 promise 的結果。

Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。

較新版本的V8也將實現兩個新的組合：Promise.allSettled和Promise.any。 Promise.any仍然處於提案的早期階段：在撰寫本文時，仍然沒有瀏覽器支持它。

Promise.any可以表明任何Promise是否fullfilled。 與 Promise.race的區別在於Promise.any不會拒絕即使其中一個Promise被拒絕。

無論如何，兩者中最有趣的是 Promise.allSettled，它也是 Promise 數組，但如果其中一個Promise拒絕，它不會短路。 當你想要檢查Promise數組是否全部已解決時，它是有用的，無論最終是否拒絕，可以把它想像成Promise.all 的反對者。

非同步進化：從Promises 到 async/await

ECMAScript 2017 (ES8)的出現，推出了新的語法誕生了async/await。

async/await只是Promise 語法糖。它只是一種基於Promises編寫非同步代碼的新方法， async/await 不會以任何方式改變JS，請記住，JS必須向後兼容舊瀏覽器，不應破壞現有代碼。

來個例子：

const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then((data) => console.log(data))


使用async/await, 我們可以將Promise包裝在標記為async的函數中，然後等待結果的返回：

const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
async function getData() {
const data = await myPromise;
console.log(data);
}
getData();


有趣的是，async 函數也會返回Promise，你也可以這樣做：

async function getData() {
const data = await myPromise;
return data;
}
getData().then(data => console.log(data));


那如何處理錯誤？ async/await提一個好處就是可以使用try/catch。 再看一下Promise，我們使用catch處理程序來處理錯誤：

const myPromise = new Promise(function(resolve, reject) {
reject(Errored, sorry!);
});
myPromise.catch(err => console.log(err));


使用async函數，我們可以重構以上代碼：

async function getData() {
try {
const data = await myPromise;
console.log(data);
// or return the data with return data
} catch (error) {
console.log(error);
}
}
getData();


並不是每個人都喜歡這種風格。try/catch會使代碼變得冗長，在使用try/catch時，還有另一個怪異的地方需要指出，如下所示：

async function getData() {
try {
if (true) {
throw Error("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}
getData()
.then(() => console.log("I will run no matter what!"))
.catch(() => console.log("Catching err"));


運行結果：

以上兩個字元串都會列印。 請記住， try/catch 是一個同步構造，但我們的非同步函數產生一個Promise。 他們在兩條不同的軌道上行駛，比如兩列火車。但他們永遠不會見面， 也就是說，throw 拋出的錯誤永遠不會觸發getData()的catch方法。

實戰中，我們不希望throw觸then的處理程序。 一種的解決方案是從函數返回Promise.reject()：

async function getData() {
try {
if (true) {
return Promise.reject("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}


現在按預期處理錯誤

getData()
.then(() => console.log("I will NOT run no matter what!"))
.catch(() => console.log("Catching err"));
"Catching err" // 輸出


除此之外，async/await似乎是在JS中構建非同步代碼的最佳方式。 我們可以更好地控制錯誤處理，代碼看起來也更清晰。

總結

JS 是一種用於Web的腳本語言，具有先編譯然後由引擎解釋的特性。 在最流行的JS引擎中，有谷歌Chrome和Node.js使用的V8，有Firefox構建的SpiderMonkey，以及Safari使用的JavaScriptCore。

JS引擎包含很有組件:調用堆棧、全局內存(堆)、事件循環、回調隊列。所有這些組件一起工作，完美地進行了調優，以處理JS中的同步和非同步代碼。

JS引擎是單線程的，這意味著運行函數只有一個調用堆棧。這一限制是JS非同步本質的基礎:所有需要時間的操作都必須由外部實體(例如瀏覽器)或回調函數負責。

為了簡化非同步代碼流，ECMAScript 2015 給我們帶來了Promise。 Promise 是一個非同步對象，用於表示任何非同步操作的失敗或成功。 但改進並沒有止步於此。 在2017年，async/ await誕生了：它是Promise的一種風格彌補，使得編寫非同步代碼成為可能，就好像它是同步的一樣。

代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

關於Fundebug

Fundebug專註於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用！

推薦閱讀：