Promise 學習

回撥地獄

什麼是回撥地獄

多層回撥函式的相互巢狀，就形成了回撥地域，示例如下：

是不是很恐怖，就像是套娃一樣。

回撥地獄的缺點

• 程式碼耦合性太強，牽一髮而動全身，難以維護。
• 大量冗餘程式碼相互巢狀，程式碼的可讀性和可複用性變差。

如何解決回撥地獄問題

為了解決回撥地獄的問題，ES6中新增了 Promise的概念。

Promise 的概念

1. Promise 是一個建構函式。

   我們可以建立Promise的例項 const p = new Promise()
   new出來的Promise例項物件，代表一個非同步操作。

2. Promise.prototype 上包含一個 .then()

   方法。

   每一次new Promise() 建構函式得到的例項物件，都可以通過原型鏈的方式訪問到 .then() 方法，例如 p.then()。

3. .then() 方法用來預先指定成功和失敗的回撥函式。
   p.then(成功的回撥函式，失敗的回撥函式)
   p.then(result => {} ， error => {} )
   呼叫 .then() 的時候，成功的回撥函式是必須填寫的，但是失敗的回撥函式是可以選擇的。

基於Promise按順序讀取檔案內容

就是說要去請求三個檔案，依次是檔案一、檔案二、檔案三。但是不能保證檔案的獲取順序，如果一次巢狀執行，就造成了回撥地獄，所以呢，那麼promise就派上用場了。

.then() 方法的特性

如果上一個 .then() 方法中返回了一個新的Promise例項物件，則可以通過下一個 .then() 繼續進行處理，通過 .then() 方法的鏈式呼叫，就解決了回撥地域的問題。

Promise支援鏈式呼叫，從而解決回撥地獄的問題：

說明：本文中 thenFs 是一個讀取檔案外掛，返回的是一個 Promise 例項

通過 .catch 捕獲錯誤

在 Promise 的鏈式操作中如果發生錯誤，可以使用 Promise.prototype.catch 方法進行捕獲和處理：

當遇到錯誤，後面的 .then() 都不會在執行了，直接執行 .catch()方法中的內容。

如果我們不希望前面的錯誤導致後面的 .then() 無法正常工作，則可以將 .catch() 的呼叫提前，就像下面一樣：

Promise.all()

Promise.all() 方法會發起並行的 Promise 非同步操作，等所有的非同步操作全部結束之後才會執行下一步的 .then() 操作（等待機制）。示例程式碼：

Promise.race()

Promise.race() 方法會發起並行的 Promise 非同步操作，只要任何一個非同步操作完成，就會立即執行下一步的 .then() 操作（賽跑機制）。示例程式碼如下：

先執行完之後，後邊的都沒了就，只有一個。

Promise 呼叫 resolve 和 reject 回撥函式

Promise 非同步操作的結果，可以呼叫 resolve 或 reject 回撥函式進行處理，示例如下：

async/await

什麼是 async/await

async/await 是ES8中引入的新語法，用來簡化Promise非同步操作，在 async/await 出現之前，開發者只能通過鏈式.then()的方式處理Promise非同步操作，示例程式碼如下：

上面 .then 的鏈式呼叫方法優點是解決了回撥地獄的問題，但是程式碼比較冗餘，閱讀性差勁，不容易理解。

所以官方推出了async/await

async/await 基本使用

使用 async/await 簡化Promise非同步操作的例項程式碼如下：

使用 await 修飾過後的返回值，不再是Promise例項，而是變成了呼叫成功的值，如果方法中用到了 await，那麼這個方法必須被 async 修飾。

async/await 使用的注意事項

1. 如果在 function 中使用了 await， 那麼這個 function 必須使用 async 修飾。
2. 在 async方法中，第一個await 之前的程式碼會同步執行，await之後的程式碼會非同步執行。
   

結束了！