文章目錄

(資料圖片僅供參考)

1. 簡(jiǎn)單運(yùn)用Promise2. Promise三個(gè)狀態(tài)3. Promise鏈?zhǔn)秸{(diào)用4. Promise.all5. Promise.race6. Axios——Promise封裝的Ajax7. async/await

1. 簡(jiǎn)單運(yùn)用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);});

控制臺(tái)查看結(jié)果：

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

2. Promise三個(gè)狀態(tài)

promise對(duì)象用于作為異步任務(wù)結(jié)果的占位符，代表著一個(gè)我們暫時(shí)還沒(méi)獲得但未來(lái)有希望獲得的值。正是因?yàn)檫@個(gè)原因，js的工程師們?yōu)镻romise設(shè)置了三種狀態(tài)，分別是等待態(tài)（pending），接受態(tài)（fullfilled），失敗態(tài)（rejected）。當(dāng)resolve函數(shù)被調(diào)用，promise的狀態(tài)就會(huì)變成接受態(tài)；反之，如果reject方法被調(diào)用，或者在promise調(diào)用過(guò)程中發(fā)生了一個(gè)未處理的異常，則會(huì)進(jìn)入失敗態(tài)。一旦狀態(tài)改變一次，promise將不會(huì)再次改變狀態(tài)。

3. Promise鏈?zhǔn)秸{(diào)用

在本文開(kāi)頭，我們提到了回調(diào)地獄，最為常見(jiàn)的就是使用Ajax時(shí)，由于多個(gè)相互關(guān)聯(lián)的請(qǐng)求多層嵌套，造成語(yǔ)法臃腫，對(duì)于后續(xù)的維護(hù)產(chǎn)生了不好的影響。而promise的鏈?zhǔn)秸{(diào)用，一定程度上解決了這個(gè)問(wèn)題。我們?cè)倩氐酱a：

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

此處使用了then方法，當(dāng)promise成功兌現(xiàn)，則觸發(fā)回調(diào)函數(shù)。我們還會(huì)發(fā)現(xiàn)，除了打印出You are success之外，還返回了一個(gè)Promise對(duì)象。

這就是說(shuō)，每次then()都會(huì)返回一個(gè)新的promise，而這一個(gè)promise則可以交給下一個(gè)then方法使用。如下所示，每次then方法之后都返回了sleep()，而我們給出的sleep方法就是返回一個(gè)promise實(shí)例化對(duì)象，這樣不斷交給下一個(gè)then方法執(zhí)行，就是我們的鏈?zhǔn)秸{(diào)用。

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);});

控制臺(tái)輸出：

4. Promise.all

Promise除了鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)多個(gè)步驟相互依賴(lài)之外，還提供了同時(shí)等待多個(gè)異步任務(wù)的方法，這里使用Promise中的all。

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

控制臺(tái)輸出如下：

在這個(gè)方法的使用中，我們不關(guān)系任務(wù)執(zhí)行的順序。使用的時(shí)候，我們傳入一個(gè)數(shù)組，元素則是promise對(duì)象。當(dāng)調(diào)用all的時(shí)候，會(huì)等待所有的promise對(duì)象被兌現(xiàn)之后，返回一個(gè)成功值數(shù)組。 但是，當(dāng)其中一個(gè)promise失敗，則會(huì)影響整個(gè)結(jié)果，如下所示：

5. Promise.race

當(dāng)我們只關(guān)心第一個(gè)返回結(jié)果的promise時(shí)，Promise.race能幫你達(dá)成這個(gè)愿望。如同Promise.all一樣，我們?cè)谑褂胷ace的時(shí)候會(huì)傳入一個(gè)promise對(duì)象數(shù)組，，一旦該數(shù)組中的一個(gè)promise被兌現(xiàn)，則返回結(jié)果。為了印證這一點(diǎn)，我們改造一下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);})

控制臺(tái)輸出如下：

6. Axios——Promise封裝的Ajax

在前端開(kāi)發(fā)中，異步向后端發(fā)起請(qǐng)求有很多中方法，jQuery的Ajax，fetch，以及axios。axios的官網(wǎng)（http://www.axios-js.com/zh-cn/docs/）上是這樣介紹的。 和jQuery的Ajax功能相似，都是對(duì)XMLHttpRequest的封裝，讓我們能夠更好地進(jìn)行異步請(qǐng)求。在Axios官網(wǎng)中還提到：“使用Promise管理異步，告別傳統(tǒng)callback方式”，這里說(shuō)的就是Promise的鏈?zhǔn)秸{(diào)用。正是這種語(yǔ)法的使用，讓回調(diào)地獄問(wèn)題得到了很好的解決。axios本質(zhì)上也是對(duì)原生XHR的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本。 Axios簡(jiǎn)單使用代碼如下：

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

本質(zhì)上Axios的實(shí)例化對(duì)象就是一個(gè)promise，因此當(dāng)我們熟悉了promise之后再來(lái)使用axios會(huì)比較容易上手。 為了加深理解，這里使用Promise封裝一個(gè)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);});

非常遺憾，出現(xiàn)了跨域問(wèn)題，但是沒(méi)關(guān)系，主要是通過(guò)一個(gè)實(shí)際的例子讓幫助大家更進(jìn)一步理解promise。

7. async/await

不知道大家發(fā)現(xiàn)沒(méi)有，Promise雖然一定程度上解決了回調(diào)地獄問(wèn)題，但是鏈?zhǔn)秸{(diào)用的語(yǔ)法仍然不夠優(yōu)雅，我們?nèi)绻苡猛耆降恼Z(yǔ)法來(lái)解決異步問(wèn)題，那該有多好。在ES6中，我們可以使用生成器和promise相結(jié)合的方式實(shí)現(xiàn)這個(gè)愿望。而JS偉大的工程師們?yōu)槲覀兲岢隽烁玫姆桨福琣sync/await，這號(hào)稱(chēng)是JavaScript解決異步問(wèn)題的終極解決方案，其實(shí)是對(duì)Promise的再一次封裝，也可以說(shuō)是語(yǔ)法糖。那么它到底如何，就請(qǐng)聽(tīng)下回分解吧！