前端js學(xué)習(xí)中，讓大家最難受的就是異步的問(wèn)題，解決異步、回調(diào)地獄等問(wèn)題時(shí)你必須得學(xué)會(huì)promise，對(duì)于多數(shù)前端程序員來(lái)說(shuō)promise簡(jiǎn)直就是噩夢(mèng)，本篇文章就是從通俗易懂的角度做為切入點(diǎn)，幫助大家輕松掌握promise

異步編程

想要學(xué)習(xí)promise，你必須要懂得什么是異步編程！眾所周知，js語(yǔ)言是單線(xiàn)程機(jī)制。所謂單線(xiàn)程就是按次序執(zhí)行，執(zhí)行完一個(gè)任務(wù)再執(zhí)行下一個(gè)。但是不影響存在同步和異步的兩種操作，這兩種操作做事情其實(shí)都是在一條流水線(xiàn)上(單線(xiàn)程)，只是這兩種操作在單線(xiàn)程上的執(zhí)行順序不一樣罷了！當(dāng)js觸發(fā)到異步任務(wù)時(shí)，會(huì)將異步任務(wù)交給瀏覽器處理，當(dāng)執(zhí)行有結(jié)果時(shí)，會(huì)把異步任務(wù)的回調(diào)函數(shù)插入待處理隊(duì)列的隊(duì)尾！

我們通俗的去解釋一下我們的異步：異步就是從主線(xiàn)程發(fā)射一個(gè)子線(xiàn)程來(lái)完成任務(wù)，每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback），前一個(gè)任務(wù)結(jié)束后，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的.

(資料圖片)

回調(diào)函數(shù)

回調(diào)函數(shù)的定義非常簡(jiǎn)單：一個(gè)函數(shù)被當(dāng)做一個(gè)實(shí)參傳入到另一個(gè)函數(shù)(外部函數(shù))，并且這個(gè)函數(shù)在外部函數(shù)內(nèi)被調(diào)用，用來(lái)完成某些任務(wù)的函數(shù)。就稱(chēng)為回調(diào)函數(shù)

回調(diào)函數(shù)的兩種寫(xiě)法(實(shí)現(xiàn)效果相同)：

const text = () => {   document.write("hello james")}setTimeout(text,1000)

setTimeout(()=>{   document.write("hello james")},1000)

這段代碼中的 setTimeout就是一個(gè)消耗時(shí)間較長(zhǎng)的過(guò)程，它的第一個(gè)參數(shù)是個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是毫秒數(shù)，這個(gè)函數(shù)執(zhí)行之后會(huì)產(chǎn)生一個(gè)子線(xiàn)程，子線(xiàn)程會(huì)等待 1 秒，然后執(zhí)行回調(diào)函數(shù) "text"，在文本中輸出hello james

setTimeout會(huì)在子線(xiàn)程中等待1秒，但是主線(xiàn)程的運(yùn)行不會(huì)受到影響！例如以下代碼：

setTimeout(()=>{    document.write("hello davis")},1000)console.log("123456");

在這里會(huì)先打印出來(lái)123456(主線(xiàn)程),然后一秒后在文本中輸出hello davis(子線(xiàn)程)

回調(diào)地獄

回調(diào)地獄這個(gè)詞聽(tīng)起來(lái)就非常的高大上，想要接觸Promise之前，必須要懂得什么是回調(diào)地獄，以及為什么會(huì)產(chǎn)生回調(diào)地獄？ 先來(lái)看看概念：當(dāng)一個(gè)回調(diào)函數(shù)嵌套一個(gè)回調(diào)函數(shù)的時(shí)候就會(huì)出現(xiàn)一個(gè)嵌套結(jié)構(gòu)當(dāng)嵌套的多了就會(huì)出現(xiàn)回調(diào)地獄的情況。舉個(gè)例子： 比如我們發(fā)送三個(gè) ajax 請(qǐng)求：

你會(huì)看到以下代碼：

$.ajax({  url: "我是第一個(gè)請(qǐng)求",  type: "get",  success (res) {    // 現(xiàn)在發(fā)送第二個(gè)請(qǐng)求    $.ajax({      url: "我是第二個(gè)請(qǐng)求"，      type:"post",      data: { a: res.a, b: res.b },      success (res1) {        // 進(jìn)行第三個(gè)請(qǐng)求        $.ajax({          url: "我是第三個(gè)請(qǐng)求",          type:"post",          data: { a: res1.a, b: res1.b },                  success (res2) {             console.log(res2)           }        })      }    })  }})

這種代碼看起來(lái)屬實(shí)是折磨人啊！當(dāng)我們把代碼寫(xiě)成這樣的時(shí)候，就陷入了可維護(hù)性差的狀態(tài)了，代碼體驗(yàn)非常的不良好，看一會(huì)就給看懵了，為了解決這個(gè)問(wèn)題，于是，就引入了我們的Promise,用Promise去解決回調(diào)地獄問(wèn)題！

Promise

Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大,它是一個(gè) ECMAScript 6 提供的類(lèi)，目的是更加優(yōu)雅地書(shū)寫(xiě)復(fù)雜的異步任務(wù)。

Promise對(duì)象有以下兩個(gè)特點(diǎn):

對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)，它的英語(yǔ)意思就是“承諾”，表示其他手段無(wú)法改變。

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果，這時(shí)就稱(chēng)為 resolved（已定型）。如果改變已經(jīng)發(fā)生了，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。

兩個(gè)特點(diǎn)摘自于??阮一峰ES6文章

Promise語(yǔ)法格式

new Promise(function (resolve, reject) {  // resolve 表示成功的回調(diào)  // reject 表示失敗的回調(diào)}).then(function (res) {  // 成功的函數(shù)}).catch(function (err) {  // 失敗的函數(shù)})

出現(xiàn)了new關(guān)鍵字，就明白了Promise對(duì)象其實(shí)就是一個(gè)構(gòu)造函數(shù)，是用來(lái)生成Promise實(shí)例的。能看出來(lái)構(gòu)造函數(shù)接收了一個(gè)函數(shù)作為參數(shù)，該函數(shù)就是Promise構(gòu)造函數(shù)的回調(diào)函數(shù)，該函數(shù)中有兩個(gè)參數(shù)resolve和reject，這兩個(gè)參數(shù)也分別是兩個(gè)函數(shù)！

簡(jiǎn)單的去理解的話(huà)resolve函數(shù)的目的是將Promise對(duì)象狀態(tài)變成成功狀態(tài)，在異步操作成功時(shí)調(diào)用，將異步操作的結(jié)果，作為參數(shù)傳遞出去。reject函數(shù)的目的是將Promise對(duì)象的狀態(tài)變成失敗狀態(tài)，在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。

Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

代碼示例：

const promise = new Promise((resolve,reject)=>{            //異步代碼            setTimeout(()=>{                // resolve(["111","222","333"])                reject("error")            },2000)        })        promise.then((res)=>{            //兌現(xiàn)承諾，這個(gè)函數(shù)被執(zhí)行            console.log("success",res);        }).catch((err)=>{            //拒絕承諾，這個(gè)函數(shù)就會(huì)被執(zhí)行            console.log("fail",err);        })

代碼分析：

上邊說(shuō)到Promise是一個(gè)構(gòu)造函數(shù)，new之后等于說(shuō)調(diào)用了構(gòu)造函數(shù)，構(gòu)造函數(shù)中傳的參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)內(nèi)的兩個(gè)參數(shù)分別又是兩個(gè)函數(shù)(reslove和reject)，雖然感覺(jué)很繞，但是理清思路會(huì)很清晰的！

我們得到對(duì)象promise,promise對(duì)象中自帶有兩個(gè)方法then和catch，這兩個(gè)方法中會(huì)分別再傳入一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)的目的在于返回你所需要成功或失敗的信息！那么怎么去調(diào)用這兩個(gè)回調(diào)函數(shù)呢？ 看下方圖可以快速理解:

這兩個(gè)函數(shù)分別做為參數(shù)(reslove和reject)傳到上方的函數(shù)中去了.隨后在構(gòu)造函數(shù)的回調(diào)函數(shù)中寫(xiě)入異步代碼(例如：ajax和定時(shí)器)，這里使用了定時(shí)器作為例子，如果你想表達(dá)的是成功回調(diào)，你可以在內(nèi)部調(diào)用函數(shù)reslove("一般情況下是后端返回的成功數(shù)據(jù))。如果你想表達(dá)的是失敗回調(diào)，你可以調(diào)用reject("一般情況下是后端返回的失敗信息").

這些就是Promise執(zhí)行的過(guò)程！雖然理解著很繞，但是多讀幾遍絕對(duì)有不一樣的收獲！

Promise鏈?zhǔn)?/strong>

then方法返回的是一個(gè)新的Promise實(shí)例（注意:不是原來(lái)那個(gè)Promise實(shí)例）。因此可以采用鏈?zhǔn)綄?xiě)法，即then方法后面再調(diào)用另一個(gè)then方法

實(shí)際案例：我想要實(shí)現(xiàn)在一個(gè)數(shù)組中查看一個(gè)帖子，但是我最終的目的是得到這個(gè)帖子下面的所有評(píng)論，這該怎么實(shí)現(xiàn)呢？

實(shí)現(xiàn)思路：先從一個(gè)接口中獲取這個(gè)帖子的信息，然后通過(guò)該帖子的帖子id從而獲取到該帖子下的所有評(píng)論

代碼如下：

pajax({    url:"http://localhost:3000/news",    data : {        author : "james"    }}).then(res=>{    return pajax({        url : "http://localhost:3000/comments",        data : {            newsId : res[0].id        }    })}).then(res=>{    console.log(res);}).catch(err=>{    console.log(err);})

const p = Promise.all([p1, p2, p3]);

console.log("顯示加載中")const q1 = pajax({    url:"http://localhost:3000/looplist"})const q2 = pajax({    url:"http://localhost:3000/datalist"})Promise.all([q1,q2]).then(res=>{    console.log(res)    console.log("隱藏加載中...")}).catch(err=>{    console.log(err)})