PPTDay 0708-Promise的使用

Promise,王紅元微博：coderwhy微信：372623326,什么是Promise呢？,ES6中一個(gè)非常重要和好用的特性就是Promise但是初次接觸Promise會(huì)一臉懵逼，這TM是什么東西？看看官方或者一些文章對(duì)它的介紹和用法，也是一頭霧水。Promise到底是做什么的呢？Promise是異步編程的一種解決方案。那什么時(shí)候我們會(huì)來(lái)處理異步事件呢？一種很常見(jiàn)的場(chǎng)景應(yīng)該就是網(wǎng)絡(luò)請(qǐng)求了。我們封裝一個(gè)網(wǎng)絡(luò)請(qǐng)求的函數(shù)，因?yàn)椴荒芰⒓茨玫浇Y(jié)果，所以不能像簡(jiǎn)單的3+4=7一樣將結(jié)果返回。所以往往我們會(huì)傳入另外一個(gè)函數(shù)，在數(shù)據(jù)請(qǐng)求成功時(shí)，將數(shù)據(jù)通過(guò)傳入的函數(shù)回調(diào)出去。如果只是一個(gè)簡(jiǎn)單的網(wǎng)絡(luò)請(qǐng)求，那么這種方案不會(huì)給我們帶來(lái)很大的麻煩。但是，當(dāng)網(wǎng)絡(luò)請(qǐng)求非常復(fù)雜時(shí)，就會(huì)出現(xiàn)回調(diào)地獄。OK，我以一個(gè)非?？鋸埖陌咐齺?lái)說(shuō)明。,網(wǎng)絡(luò)請(qǐng)求的回調(diào)地獄,我們來(lái)考慮下面的場(chǎng)景(有夸張的成分)：我們需要通過(guò)一個(gè)url1從服務(wù)器加載一個(gè)數(shù)據(jù)data1，data1中包含了下一個(gè)請(qǐng)求的url2我們需要通過(guò)data1取出url2，從服務(wù)器加載數(shù)據(jù)data2，data2中包含了下一個(gè)請(qǐng)求的url3我們需要通過(guò)data2取出url3，從服務(wù)器加載數(shù)據(jù)data3，data3中包含了下一個(gè)請(qǐng)求的url4發(fā)送網(wǎng)絡(luò)請(qǐng)求url4，獲取最終的數(shù)據(jù)data4上面的代碼有什么問(wèn)題嗎？正常情況下，不會(huì)有什么問(wèn)題，可以正常運(yùn)行并且獲取我們想要的結(jié)果。但是，這樣額代碼難看而且不容易維護(hù)。我們更加期望的是一種更加優(yōu)雅的方式來(lái)進(jìn)行這種異步操作。如何做呢？就是使用Promise。Promise可以以一種非常優(yōu)雅的方式來(lái)解決這個(gè)問(wèn)題。,定時(shí)器的異步事件,我們先來(lái)看看Promise最基本的語(yǔ)法。這里，我們用一個(gè)定時(shí)器來(lái)模擬異步事件：假設(shè)下面的data是從網(wǎng)絡(luò)上1秒后請(qǐng)求的數(shù)據(jù)console.log就是我們的處理方式。這是我們過(guò)去的處理方式，我們將它換成Promise代碼這個(gè)例子會(huì)讓我們感覺(jué)脫褲放屁，多此一舉首先，下面的Promise代碼明顯比上面的代碼看起來(lái)還要復(fù)雜。其次，下面的Promise代碼中包含的resolve、reject、then、catch都是些什么東西？我們先不管第一個(gè)復(fù)雜度的問(wèn)題，因?yàn)檫@樣的一個(gè)屁大點(diǎn)的程序根本看不出來(lái)Promise真正的作用。,定時(shí)器異步事件解析,我們先來(lái)認(rèn)認(rèn)真真的讀一讀這個(gè)程序到底做了什么？newPromise很明顯是創(chuàng)建一個(gè)Promise對(duì)象小括號(hào)中(resolve,reject)=)也很明顯就是一個(gè)函數(shù)，而且我們這里用的是之前剛剛學(xué)習(xí)過(guò)的箭頭函數(shù)。但是resolve,reject它們是什么呢？我們先知道一個(gè)事實(shí)：在創(chuàng)建Promise時(shí)，傳入的這個(gè)箭頭函數(shù)是固定的（一般我們都會(huì)這樣寫）resolve和reject它們兩個(gè)也是函數(shù)，通常情況下，我們會(huì)根據(jù)請(qǐng)求數(shù)據(jù)的成功和失敗來(lái)決定調(diào)用哪一個(gè)。成功還是失敗？如果是成功的，那么通常我們會(huì)調(diào)用resolve(messsage)，這個(gè)時(shí)候，我們后續(xù)的then會(huì)被回調(diào)。如果是失敗的，那么通常我們會(huì)調(diào)用reject(error)，這個(gè)時(shí)候，我們后續(xù)的catch會(huì)被回調(diào)。OK，這就是Promise最基本的使用了。,Promise三種狀態(tài),首先,當(dāng)我們開發(fā)中有異步操作時(shí),就可以給異步操作包裝一個(gè)Promise異步操作之后會(huì)有三種狀態(tài)我們一起來(lái)看一下這三種狀態(tài):pending：等待狀態(tài)，比如正在進(jìn)行網(wǎng)絡(luò)請(qǐng)求，或者定時(shí)器沒(méi)有到時(shí)間。fulfill：滿足狀態(tài)，當(dāng)我們主動(dòng)回調(diào)了resolve時(shí)，就處于該狀態(tài)，并且會(huì)回調(diào).then()reject：拒絕狀態(tài)，當(dāng)我們主動(dòng)回調(diào)了reject時(shí)，就處于該狀態(tài)，并且會(huì)回調(diào).catch(),Promise鏈?zhǔn)秸{(diào)用,我們?cè)诳碢romise的流程圖時(shí)，發(fā)現(xiàn)無(wú)論是then還是catch都可以返回一個(gè)Promise對(duì)象。所以，我們的代碼其實(shí)是可以進(jìn)行鏈?zhǔn)秸{(diào)用的：這里我們直接通過(guò)Promise包裝了一下新的數(shù)據(jù)，將Promise對(duì)象返回了Promise.resovle()：將數(shù)據(jù)包裝成Promise對(duì)象，并且在內(nèi)部回調(diào)resolve()函數(shù)Promise.reject()：將數(shù)據(jù)包裝成Promise對(duì)象，并且在內(nèi)部回調(diào)reject()函數(shù),鏈?zhǔn)秸{(diào)用簡(jiǎn)寫,簡(jiǎn)化版代碼：如果我們希望數(shù)據(jù)直接包裝