世界快消息！js基礎知識：Promise鏈式調用

文章目錄

(資料圖片僅供參考)

1. 簡單運用Promise2. Promise三個狀態3. Promise鏈式調用4. Promise.all5. Promise.race6. Axios——Promise封裝的Ajax7. async/await

1. 簡單運用Promise

function sleep(time) {return new Promise(function(resolve, reject) {if(time < 1000) {setTimeout(resolve("You are success"), time);    }        else {reject("fail");        }    })}sleep(500).then(msg => {console.log(msg);}).catch(err => {console.log(err);});

控制臺查看結果：

一般在使用Promise的時候，會在定義的函數中返回一個Promise構造函數，該構造函數包含兩個參數，分別是resolve和reject。在上面的代碼中，我們調用sleep方法，傳入500。而我們使用了Promise的內置方法then，并且向then中傳兩個參數，一個是成功回調函數，一個是失敗回調函數（本例中省略第二個參數）。當承諾成功兌現，第一個回調就會被調用，而當出現錯誤的時候，就會調用第二個參數reject（此處省略）。由于500小于1000，因此會執行setTimeout(resolve(“You are success”), time)，輸出了You are success。 在上面的例子中，我們還使用了Promise中的catch方法，當傳入的參數大于500，則會執行catch方法，catch方法中傳遞一個參數，也就是reject，因此在失敗的時候會執行它。如下：

2. Promise三個狀態

promise對象用于作為異步任務結果的占位符，代表著一個我們暫時還沒獲得但未來有希望獲得的值。正是因為這個原因，js的工程師們為Promise設置了三種狀態，分別是等待態（pending），接受態（fullfilled），失敗態（rejected）。當resolve函數被調用，promise的狀態就會變成接受態；反之，如果reject方法被調用，或者在promise調用過程中發生了一個未處理的異常，則會進入失敗態。一旦狀態改變一次，promise將不會再次改變狀態。

3. Promise鏈式調用

在本文開頭，我們提到了回調地獄，最為常見的就是使用Ajax時，由于多個相互關聯的請求多層嵌套，造成語法臃腫，對于后續的維護產生了不好的影響。而promise的鏈式調用，一定程度上解決了這個問題。我們再回到代碼：

sleep(500).then(msg => {console.log(msg);}).catch(err => {console.log(err);});

此處使用了then方法，當promise成功兌現，則觸發回調函數。我們還會發現，除了打印出You are success之外，還返回了一個Promise對象。

這就是說，每次then()都會返回一個新的promise，而這一個promise則可以交給下一個then方法使用。如下所示，每次then方法之后都返回了sleep()，而我們給出的sleep方法就是返回一個promise實例化對象，這樣不斷交給下一個then方法執行，就是我們的鏈式調用。

sleep(500).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(1500);}).catch(err => {console.log(err);});

控制臺輸出：

4. Promise.all

Promise除了鏈式調用實現多個步驟相互依賴之外，還提供了同時等待多個異步任務的方法，這里使用Promise中的all。

Promise.all([ sleep(500), sleep(600), sleep(1500)]).then(result => {console.log(result);}).catch(err => {console.log(err);})

控制臺輸出如下：

在這個方法的使用中，我們不關系任務執行的順序。使用的時候，我們傳入一個數組，元素則是promise對象。當調用all的時候，會等待所有的promise對象被兌現之后，返回一個成功值數組。 但是，當其中一個promise失敗，則會影響整個結果，如下所示：

5. Promise.race

當我們只關心第一個返回結果的promise時，Promise.race能幫你達成這個愿望。如同Promise.all一樣，我們在使用race的時候會傳入一個promise對象數組，，一旦該數組中的一個promise被兌現，則返回結果。為了印證這一點，我們改造一下sleep方法，如下：

function sleep(time) {return new Promise(function(resolve, reject) {if(time < 1000) {setTimeout(resolve(`${time}s later...`), time);    }        else {reject("fail");        }    })}Promise.race([ sleep(500), sleep(600), sleep(700)]).then(result => {console.log(result);})

控制臺輸出如下：

6. Axios——Promise封裝的Ajax

在前端開發中，異步向后端發起請求有很多中方法，jQuery的Ajax，fetch，以及axios。axios的官網（http://www.axios-js.com/zh-cn/docs/）上是這樣介紹的。 和jQuery的Ajax功能相似，都是對XMLHttpRequest的封裝，讓我們能夠更好地進行異步請求。在Axios官網中還提到：“使用Promise管理異步，告別傳統callback方式”，這里說的就是Promise的鏈式調用。正是這種語法的使用，讓回調地獄問題得到了很好的解決。axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本。 Axios簡單使用代碼如下：

axios.get(url)  .then(function (response) {console.log(response);  })  .catch(function (error) {console.log(error);  });

本質上Axios的實例化對象就是一個promise，因此當我們熟悉了promise之后再來使用axios會比較容易上手。 為了加深理解，這里使用Promise封裝一個XMLHttpRequest，模擬axios。代碼如下：

function getJSON (url) {return new Promise( (resolve, reject) => {var xhr = new XMLHttpRequest()        xhr.open("GET", url, true)        xhr.onreadystatechange = () => {if (this.readyState === 4) {if (this.status === 200) {resolve(this.responseText)                } else {var resJson = {code: this.status, response: this.response                     }                    reject(resJson, this)                }            }        }        xhr.send()    })}getJSON ("https://blog.csdn.net/").then(res => {console.log(res); }).catch(error => {console.error(error);});

非常遺憾，出現了跨域問題，但是沒關系，主要是通過一個實際的例子讓幫助大家更進一步理解promise。

7. async/await

不知道大家發現沒有，Promise雖然一定程度上解決了回調地獄問題，但是鏈式調用的語法仍然不夠優雅，我們如果能用完全同步的語法來解決異步問題，那該有多好。在ES6中，我們可以使用生成器和promise相結合的方式實現這個愿望。而JS偉大的工程師們為我們提出了更好的方案，async/await，這號稱是JavaScript解決異步問題的終極解決方案，其實是對Promise的再一次封裝，也可以說是語法糖。那么它到底如何，就請聽下回分解吧！