文章目錄

• 1. 異步操作
• 2. Promise 基本語法
• 3. Promise.prototype.then()
• 4. Promise.prototype.catch()
• 5. Promise.resolve()
• 6. Promise.reject()
• 7. Promise.all()
• 8. Promise.race()

1. 異步操作

JS是單線程

單線程，即同一個時間只能處理一個任務。

為什么 JS 是單線程的？作為瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操作 DOM 。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定 JavaScript同時有兩個線程，一個線程在某個 DOM 節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？

單線程就意味著，所有任務都需要排隊，前一個任務結束，才能執行后一個任務。如果前一個任務耗時很長，那么后一個任務就不得不一直等待，于是乎，JS 設計者們把所有任分成兩類，同步和異步。

• 同步：只有前一個任務執行完畢，才能執行后一個任務
• 異步：當同步任務執行到某個 WebAPI 時，就會觸發異步操作，此時瀏覽器會單獨開線程去處理這些異步任務。

console.log(1) setTimeout(() => { // 異步任務，放入任務隊列中console.log(2) }, 0) console.log(3) // 1 3 2

步任務和異步任務的執行過程：

回調地獄

ajax('static/a.json', res => {console.log(res)ajax('static/b.json', res => {console.log(res)ajax('static/c.json', res => {console.log(res)})}) })

如果嵌套變多，代碼層次就會變深，維護難度也隨之增加。

這就被稱為 “回調地獄” 或者“回調深淵”。

2. Promise 基本語法

Promise 就是為了解決“回調地獄”問題的，它可以將異步操作的處理變得很優雅。

// 創建Promise實例 const promise = new Promise(function(resolve, reject) {// ... some codeif ( /* 異步操作成功 */ ) {resolve(value)} else {reject(error)} })

Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。

• 處理結果正常的話，調用resolve(處理結果值)，將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去
• 處理結果錯誤的話，調用reject(Error對象)，將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。

promise.then(function(value) {// success }, function(error) {// failure })

Promise 內部是有狀態的(pending、fulfilled、rejected)，Promise 對象根據狀態來確定執行哪個方法。Promise 在實例化的時候狀態是默認 pending 的，當異步操作是完成的，狀態會被修改為 fulfilled，如果異步操作遇到異常，狀態會被修改為 rejected，可以通過下圖來看下狀態的走向：

狀態轉化是單向的，不可逆轉，已經確定的狀態（fulfilled/rejected）無法轉回初始狀態（pending），而且只能是從 pending 到 fulfilled 或者 rejected

3. Promise.prototype.then()

var promise = new Promise(function(resolve, reject) {resolve('傳遞給then的值') }) promise.then(function(value) {console.log(value) }, function(error) {console.error(error) })

這段代碼創建一個 Promise 對象，定義了處理 onFulfilled 和 onRejected 的函數（handler），然后返回這個 Promise 對象；當執行resolve時，會進入then方法的成功回調方法。then方法的第一個方法為成功回調，第二個方法為失敗的回調，參數為resolve/reject傳遞的參數。

4. Promise.prototype.catch()

使用 Promise 對象的 catch 方法來捕獲異步操作過程中出現的任何異常。

function test() {return new Promise((resolve, reject) => {reject(new Error('es'))}) }test().catch((e) => {console.log(e.message) // es })

reject 不會觸發catch，new Error會觸發catch，不建議在 Promise 內部使用 throw 來觸發異常，而是使用 reject(new Error()) 的方式來做，因為 throw 的方式并沒有改變 Pronise 的狀態

5. Promise.resolve()

一般情況下我們都會使用 new Promise() 來創建 Promise 對象，但是除此之外我們也可以使用其他方法。

在這里，我們將會學習如何使用 Promise.resolve 和 Promise.reject 這兩個靜態方法。

new Promise(function(resolve) {resolve(42) })Promise.resolve(42).then(function(value) {console.log(value) })

Promise.resolve 作為 new Promise() 的快捷方式，在進行 Promise 對象的初始化或者編寫測試代碼的時候都非常方便。

6. Promise.reject()

Promise.reject(error) 是和 Promise.resolve(value) 類似的靜態方法，是 new Promise() 方法的快捷方式。

new Promise(function(resolve, reject) {reject(new Error('出錯了')) })Promise.reject(new Error('Error!'))

7. Promise.all()

Promise.all 生成并返回一個新的 Promise 對象，所以它可以使用 Promise 實例的所有方法。參數傳遞promise數組中所有的 Promise 對象都變為resolve的時候，該方法才會返回， 新創建的 Promise 則會使用這些 promise 的值。
如果參數中的任何一個promise為reject的話，則整個Promise.all調用會立即終止，并返回一個reject的新的 Promise 對象。

var p1 = Promise.resolve(1) var p2 = Promise.resolve(2) var p3 = Promise.resolve(3) Promise.all([p1, p2, p3]).then(function(results) {console.log(results) // [1, 2, 3] })

8. Promise.race()

Promise.race 生成并返回一個新的 Promise 對象。參數 promise 數組中的任何一個 Promise 對象如果變為 resolve 或者 reject 的話， 該函數就會返回，并使用這個 Promise 對象的值進行 resolve 或者 reject。

var p1 = Promise.resolve(1) var p2 = Promise.resolve(2) var p3 = Promise.resolve(3) Promise.race([p1, p2, p3]).then(function(value) {console.log(value) // 1 })

總結

以上是生活随笔為你收集整理的【ES6(2015)】Promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。