前言

在異步編程中，Promise 扮演了舉足輕重的角色，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理和更強大。可能有些小伙伴會有這樣的疑問：2020年了，怎么還在談?wù)揚romise？事實上，有些朋友對于這個幾乎每天都在打交道的“老朋友”，貌似全懂,但稍加深入就可能疑問百出，本文帶大家深入理解這個熟悉的陌生人—— Promise.

基本用法語法

new Promise( function(resolve, reject) {...} /* executor */ ) 構(gòu)建 Promise 對象時，需要傳入一個 executor函數(shù)，主要業(yè)務(wù)流程都在 executor 函數(shù)中執(zhí)行。 Promise構(gòu)造函數(shù)執(zhí)行時立即調(diào)用executor 函數(shù)， resolve 和 reject 兩個函數(shù)作為參數(shù)傳遞給executor，resolve 和 reject 函數(shù)被調(diào)用時，分別將promise的狀態(tài)改為fulfilled（完成）或rejected（失敗）。一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。 在 executor 函數(shù)中調(diào)用 resolve 函數(shù)后，會觸發(fā) promise.then 設(shè)置的回調(diào)函數(shù)；而調(diào)用 reject 函數(shù)后，會觸發(fā) promise.catch 設(shè)置的回調(diào)函數(shù)。

值得注意的是，Promise 是用來管理異步編程的，它本身不是異步的，new Promise的時候會立即把executor函數(shù)執(zhí)行，只不過我們一般會在executor函數(shù)中處理一個異步操作。比如下面代碼中，一開始是會先打印出2。

let p1 = new Promise(()=>{ setTimeout(()=>{ console.log(1) },1000) console.log(2) })console.log(3) // 2 3 1

Promise 采用了回調(diào)函數(shù)延遲綁定技術(shù)，在執(zhí)行 resolve 函數(shù)的時候，回調(diào)函數(shù)還沒有綁定，那么只能推遲回調(diào)函數(shù)的執(zhí)行。這具體是啥意思呢？我們先來看下面的例子：

let p1 = new Promise((resolve,reject)=>{ console.log(1); resolve(’浪里行舟’) console.log(2)})// then:設(shè)置成功或者失敗后處理的方法p1.then(result=>{ //p1延遲綁定回調(diào)函數(shù) console.log(’成功 ’+result)},reason=>{ console.log(’失敗 ’+reason)})console.log(3)// 1// 2// 3// 成功 浪里行舟

new Promise的時候先執(zhí)行executor函數(shù)，打印出 1、2，Promise在執(zhí)行resolve時，觸發(fā)微任務(wù)，還是繼續(xù)往下執(zhí)行同步任務(wù)，

執(zhí)行p1.then時，存儲起來兩個函數(shù)（此時這兩個函數(shù)還沒有執(zhí)行）,然后打印出3，此時同步任務(wù)執(zhí)行完成，最后執(zhí)行剛剛那個微任務(wù)，從而執(zhí)行.then中成功的方法。

錯誤處理

Promise 對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被 onReject 函數(shù)處理或 catch 語句捕獲為止。具備了這樣“冒泡”的特性后，就不需要在每個 Promise 對象中單獨捕獲異常了。

要遇到一個then，要執(zhí)行成功或者失敗的方法，但如果此方法并沒有在當前then中被定義，則順延到下一個對應(yīng)的函數(shù)

function executor (resolve, reject) { let rand = Math.random() console.log(1) console.log(rand) if (rand > 0.5) { resolve() } else { reject() }}var p0 = new Promise(executor)var p1 = p0.then((value) => { console.log(’succeed-1’) return new Promise(executor)})var p2 = p1.then((value) => { console.log(’succeed-2’) return new Promise(executor)})p2.catch((error) => { console.log(’error’, error)})console.log(2)

這段代碼有三個 Promise 對象：p0～p2。無論哪個對象里面拋出異常，都可以通過最后一個對象 p2.catch 來捕獲異常，通過這種方式可以將所有 Promise 對象的錯誤合并到一個函數(shù)來處理，這樣就解決了每個任務(wù)都需要單獨處理異常的問題。

通過這種方式，我們就消滅了嵌套調(diào)用和頻繁的錯誤處理，這樣使得我們寫出來的代碼更加優(yōu)雅，更加符合人的線性思維。

Promise鏈式調(diào)用

我們都知道可以把多個Promise連接到一起來表示一系列異步驟。這種方式可以實現(xiàn)的關(guān)鍵在于以下兩個Promise 固有行為特性：

每次你對Promise調(diào)用then，它都會創(chuàng)建并返回一個新的Promise，我們可以將其鏈接起來； 不管從then調(diào)用的完成回調(diào)（第一個參數(shù)）返回的值是什么，它都會被自動設(shè)置為被鏈接Promise（第一點中的）的完成。

先通過下面的例子，來解釋一下剛剛這段話是什么意思，然后詳細介紹下鏈式調(diào)用的執(zhí)行流程

let p1=new Promise((resolve,reject)=>{ resolve(100) // 決定了下個then中成功方法會被執(zhí)行})// 連接p1let p2=p1.then(result=>{ console.log(’成功1 ’+result) return Promise.reject(1) // 返回一個新的Promise實例，決定了當前實例是失敗的，所以決定下一個then中失敗方法會被執(zhí)行},reason=>{ console.log(’失敗1 ’+reason) return 200})// 連接p2 let p3=p2.then(result=>{ console.log(’成功2 ’+result)},reason=>{ console.log(’失敗2 ’+reason)})// 成功1 100// 失敗2 1

我們通過返回 Promise.reject(1) ，完成了第一個調(diào)用then創(chuàng)建并返回的promise p2。p2的then調(diào)用在運行時會從return Promise.reject(1) 語句接受完成值。當然，p2.then又創(chuàng)建了另一個新的promise，可以用變量p3存儲。

new Promise出來的實例，成功或者失敗，取決于executor函數(shù)執(zhí)行的時候，執(zhí)行的是resolve還是reject決定的，或executor函數(shù)執(zhí)行發(fā)生異常錯誤，這兩種情況都會把實例狀態(tài)改為失敗的。

p2執(zhí)行then返回的新實例的狀態(tài)，決定下一個then中哪一個方法會被執(zhí)行，有以下幾種情況：

不論是成功的方法執(zhí)行，還是失敗的方法執(zhí)行（then中的兩個方法），凡是執(zhí)行拋出了異常，則都會把實例的狀態(tài)改為失敗。 方法中如果返回一個新的Promise實例（比如上例中的Promise.reject(1)），返回這個實例的結(jié)果是成功還是失敗，也決定了當前實例是成功還是失敗。 剩下的情況基本上都是讓實例變?yōu)槌晒Φ臓顟B(tài)，上一個then中方法返回的結(jié)果會傳遞到下一個then的方法中。

我們再來看個例子

new Promise(resolve=>{ resolve(a) // 報錯 // 這個executor函數(shù)執(zhí)行發(fā)生異常錯誤，決定下個then失敗方法會被執(zhí)行}).then(result=>{ console.log(`成功：${result}`) return result*10},reason=>{ console.log(`失敗：${reason}`)// 執(zhí)行這句時候，沒有發(fā)生異常或者返回一個失敗的Promise實例，所以下個then成功方法會被執(zhí)行// 這里沒有return，最后會返回 undefined}).then(result=>{ console.log(`成功：${result}`)},reason=>{ console.log(`失敗：${reason}`)})// 失敗：ReferenceError: a is not defined// 成功：undefinedasync & await

從上面一些例子，我們可以看出，雖然使用 Promise 能很好地解決回調(diào)地獄的問題，但是這種方式充滿了 Promise 的 then() 方法，如果處理流程比較復(fù)雜的話，那么整段代碼將充斥著 then，語義化不明顯，代碼不能很好地表示執(zhí)行流程。

ES7中新增的異步編程方法，async/await的實現(xiàn)是基于 Promise的，簡單而言就是async 函數(shù)就是返回Promise對象，是generator的語法糖。很多人認為async/await是異步操作的終極解決方案：

語法簡潔，更像是同步代碼，也更符合普通的閱讀習(xí)慣； 改進js中異步操作串行執(zhí)行的代碼組織方式，減少callback的嵌套； Promise中不能自定義使用try/catch進行錯誤捕獲，但是在Async/await中可以像處理同步代碼處理錯誤。

不過也存在一些缺點，因為 await 將異步代碼改造成了同步代碼，如果多個異步代碼沒有依賴性卻使用了 await 會導(dǎo)致性能上的降低。

async function test() { // 以下代碼沒有依賴性的話，完全可以使用 Promise.all 的方式 // 如果有依賴性的話，其實就是解決回調(diào)地獄的例子了 await fetch(url1) await fetch(url2) await fetch(url3)}

觀察下面這段代碼，你能判斷出打印出來的內(nèi)容是什么嗎？

let p1 = Promise.resolve(1)let p2 = new Promise(resolve => { setTimeout(() => { resolve(2) }, 1000)})async function fn() { console.log(1)// 當代碼執(zhí)行到此行（先把此行），構(gòu)建一個異步的微任務(wù)// 等待promise返回結(jié)果，并且await下面的代碼也都被列到任務(wù)隊列中 let result1 = await p2 console.log(3) let result2 = await p1 console.log(4)}fn()console.log(2)// 1 2 3 4

如果 await 右側(cè)表達邏輯是個 promise，await會等待這個promise的返回結(jié)果，只有返回的狀態(tài)是resolved情況，才會把結(jié)果返回,如果promise是失敗狀態(tài)，則await不會接收其返回結(jié)果，await下面的代碼也不會在繼續(xù)執(zhí)行。

let p1 = Promise.reject(100)async function fn1() { let result = await p1 console.log(1) //這行代碼不會執(zhí)行}

我們再來看道比較復(fù)雜的題目：

console.log(1)setTimeout(()=>{console.log(2)},1000)async function fn(){ console.log(3) setTimeout(()=>{console.log(4)},20) return Promise.reject()}async function run(){ console.log(5) await fn() console.log(6)}run()//需要執(zhí)行150ms左右for(let i=0;i<90000000;i++){}setTimeout(()=>{ console.log(7) new Promise(resolve=>{console.log(8)resolve() }).then(()=>{console.log(9)})},0)console.log(10)// 1 5 3 10 4 7 8 9 2

做這道題之前，讀者需明白：

基于微任務(wù)的技術(shù)有 MutationObserver、Promise 以及以 Promise 為基礎(chǔ)開發(fā)出來的很多其他的技術(shù)，本題中resolve()、await fn()都是微任務(wù)。 不管宏任務(wù)是否到達時間，以及放置的先后順序，每次主線程執(zhí)行棧為空的時候，引擎會優(yōu)先處理微任務(wù)隊列，處理完微任務(wù)隊列里的所有任務(wù)，再去處理宏任務(wù)。

接下來，我們一步一步分析：

首先執(zhí)行同步代碼，輸出 1，遇見第一個setTimeout，將其回調(diào)放入任務(wù)隊列（宏任務(wù)）當中，繼續(xù)往下執(zhí)行 運行run(),打印出 5，并往下執(zhí)行，遇見 await fn()，將其放入任務(wù)隊列（微任務(wù)） await fn() 當前這一行代碼執(zhí)行時，fn函數(shù)會立即執(zhí)行的,打印出3，遇見第二個setTimeout，將其回調(diào)放入任務(wù)隊列（宏任務(wù)），await fn() 下面的代碼需要等待返回Promise成功狀態(tài)才會執(zhí)行，所以6是不會被打印的。 繼續(xù)往下執(zhí)行，遇到for循環(huán)同步代碼，需要等150ms,雖然第二個setTimeout已經(jīng)到達時間，但不會執(zhí)行，遇見第三個setTimeout，將其回調(diào)放入任務(wù)隊列（宏任務(wù)），然后打印出10。值得注意的是，這個定時器 推遲時間0毫秒實際上達不到的。根據(jù)html5標準，setTimeOut推遲執(zhí)行的時間，最少是4毫秒。 同步代碼執(zhí)行完畢，此時沒有微任務(wù)，就去執(zhí)行宏任務(wù)，上面提到已經(jīng)到點的setTimeout先執(zhí)行，打印出4 然后執(zhí)行下一個setTimeout的宏任務(wù)，所以先打印出7，new Promise的時候會立即把executor函數(shù)執(zhí)行，打印出8，然后在執(zhí)行resolve時，觸發(fā)微任務(wù)，于是打印出9 最后執(zhí)行第一個setTimeout的宏任務(wù)，打印出2常用的方法1、Promise.resolve()

Promise.resolve(value)方法返回一個以給定值解析后的Promise 對象。Promise.resolve()等價于下面的寫法:

Promise.resolve(’foo’)// 等價于new Promise(resolve => resolve(’foo’))

Promise.resolve方法的參數(shù)分成四種情況。

（1）參數(shù)是一個 Promise 實例

如果參數(shù)是 Promise 實例，那么Promise.resolve將不做任何修改、原封不動地返回這個實例。

const p1 = new Promise(function (resolve, reject) { setTimeout(() => reject(new Error(’fail’)), 3000)})const p2 = new Promise(function (resolve, reject) { setTimeout(() => resolve(p1), 1000)})p2 .then(result => console.log(result)) .catch(error => console.log(error))// Error: fail

上面代碼中，p1是一個 Promise，3 秒之后變?yōu)閞ejected。p2的狀態(tài)在 1 秒之后改變，resolve方法返回的是p1。由于p2返回的是另一個 Promise，導(dǎo)致p2自己的狀態(tài)無效了，由p1的狀態(tài)決定p2的狀態(tài)。所以，后面的then語句都變成針對后者（p1）。又過了 2 秒，p1變?yōu)閞ejected，導(dǎo)致觸發(fā)catch方法指定的回調(diào)函數(shù)。

（2）參數(shù)不是具有then方法的對象，或根本就不是對象

Promise.resolve('Success').then(function(value) { // Promise.resolve方法的參數(shù)，會同時傳給回調(diào)函數(shù)。 console.log(value); // 'Success'}, function(value) { // 不會被調(diào)用});

（3）不帶有任何參數(shù)

Promise.resolve()方法允許調(diào)用時不帶參數(shù)，直接返回一個resolved狀態(tài)的 Promise 對象。如果希望得到一個 Promise 對象，比較方便的方法就是直接調(diào)用Promise.resolve()方法。

Promise.resolve().then(function () { console.log(’two’);});console.log(’one’);// one two

（4）參數(shù)是一個thenable對象

thenable對象指的是具有then方法的對象,Promise.resolve方法會將這個對象轉(zhuǎn)為 Promise 對象，然后就立即執(zhí)行thenable對象的then方法。

let thenable = { then: function(resolve, reject) { resolve(42); }};let p1 = Promise.resolve(thenable);p1.then(function(value) { console.log(value); // 42});2、Promise.reject()

Promise.reject()方法返回一個帶有拒絕原因的Promise對象。

new Promise((resolve,reject) => { reject(new Error('出錯了'));});// 等價于 Promise.reject(new Error('出錯了')); // 使用方法Promise.reject(new Error('BOOM!')).catch(error => { console.error(error);});

值得注意的是，調(diào)用resolve或reject以后，Promise 的使命就完成了，后繼操作應(yīng)該放到then方法里面，而不應(yīng)該直接寫在resolve或reject的后面。所以，最好在它們前面加上return語句，這樣就不會有意外。

new Promise((resolve, reject) => { return reject(1); // 后面的語句不會執(zhí)行 console.log(2);})3、Promise.all()

let p1 = Promise.resolve(1)let p2 = new Promise(resolve => { setTimeout(() => { resolve(2) }, 1000)})let p3 = Promise.resolve(3)Promise.all([p3, p2, p1]) .then(result => { // 返回的結(jié)果是按照Array中編寫實例的順序來 console.log(result) // [ 3, 2, 1 ] }) .catch(reason => { console.log('失敗:reason') })

Promise.all 生成并返回一個新的 Promise 對象，所以它可以使用 Promise 實例的所有方法。參數(shù)傳遞promise數(shù)組中所有的 Promise 對象都變?yōu)閞esolve的時候，該方法才會返回， 新創(chuàng)建的 Promise 則會使用這些 promise 的值。

如果參數(shù)中的任何一個promise為reject的話，則整個Promise.all調(diào)用會立即終止，并返回一個reject的新的 Promise 對象。

4、Promise.allSettled()

有時候，我們不關(guān)心異步操作的結(jié)果，只關(guān)心這些操作有沒有結(jié)束。這時，ES2020 引入Promise.allSettled()方法就很有用。如果沒有這個方法，想要確保所有操作都結(jié)束，就很麻煩。Promise.all()方法無法做到這一點。

假如有這樣的場景：一個頁面有三個區(qū)域，分別對應(yīng)三個獨立的接口數(shù)據(jù)，使用 Promise.all 來并發(fā)請求三個接口，如果其中任意一個接口出現(xiàn)異常，狀態(tài)是reject,這會導(dǎo)致頁面中該三個區(qū)域數(shù)據(jù)全都無法出來，顯然這種狀況我們是無法接受，Promise.allSettled的出現(xiàn)就可以解決這個痛點：

Promise.allSettled([ Promise.reject({ code: 500, msg: ’服務(wù)異常’ }), Promise.resolve({ code: 200, list: [] }), Promise.resolve({ code: 200, list: [] })]).then(res => { console.log(res) /* 0: {status: 'rejected', reason: {…}} 1: {status: 'fulfilled', value: {…}} 2: {status: 'fulfilled', value: {…}} */ // 過濾掉 rejected 狀態(tài)，盡可能多的保證頁面區(qū)域數(shù)據(jù)渲染 RenderContent( res.filter(el => { return el.status !== ’rejected’ }) )})

Promise.allSettled跟Promise.all類似, 其參數(shù)接受一個Promise的數(shù)組, 返回一個新的Promise,唯一的不同在于, 它不會進行短路, 也就是說當Promise全部處理完成后,我們可以拿到每個Promise的狀態(tài), 而不管是否處理成功。

5、Promise.race()

Promise.all()方法的效果是'誰跑的慢，以誰為準執(zhí)行回調(diào)'，那么相對的就有另一個方法'誰跑的快，以誰為準執(zhí)行回調(diào)'，這就是Promise.race()方法，這個詞本來就是賽跑的意思。race的用法與all一樣，接收一個promise對象數(shù)組為參數(shù)。

Promise.all在接收到的所有的對象promise都變?yōu)镕ulFilled或者Rejected狀態(tài)之后才會繼續(xù)進行后面的處理，與之相對的是Promise.race只要有一個promise對象進入FulFilled或者Rejected狀態(tài)的話，就會繼續(xù)進行后面的處理。

// `delay`毫秒后執(zhí)行resolvefunction timerPromisefy(delay) { return new Promise(resolve => {setTimeout(() => { resolve(delay);}, delay); });}// 任何一個promise變?yōu)閞esolve或reject的話程序就停止運行Promise.race([ timerPromisefy(1), timerPromisefy(32), timerPromisefy(64)]).then(function (value) { console.log(value); // => 1});

上面的代碼創(chuàng)建了3個promise對象，這些promise對象會分別在1ms、32ms 和 64ms后變?yōu)榇_定狀態(tài)，即FulFilled，并且在第一個變?yōu)榇_定狀態(tài)的1ms后，.then注冊的回調(diào)函數(shù)就會被調(diào)用。

6、Promise.prototype.finally()

ES9 新增 finally() 方法返回一個Promise。在promise結(jié)束時，無論結(jié)果是fulfilled或者是rejected，都會執(zhí)行指定的回調(diào)函數(shù)。這為在Promise是否成功完成后都需要執(zhí)行的代碼提供了一種方式。這避免了同樣的語句需要在then()和catch()中各寫一次的情況。

比如我們發(fā)送請求之前會出現(xiàn)一個loading，當我們請求發(fā)送完成之后，不管請求有沒有出錯，我們都希望關(guān)掉這個loading。

this.loading = truerequest() .then((res) => { // do something }) .catch(() => { // log err }) .finally(() => { this.loading = false })

finally方法的回調(diào)函數(shù)不接受任何參數(shù)，這表明，finally方法里面的操作，應(yīng)該是與狀態(tài)無關(guān)的，不依賴于 Promise 的執(zhí)行結(jié)果。

實際應(yīng)用

假設(shè)有這樣一個需求：紅燈 3s 亮一次，綠燈 1s 亮一次，黃燈 2s 亮一次；如何讓三個燈不斷交替重復(fù)亮燈？三個亮燈函數(shù)已經(jīng)存在：

function red() { console.log(’red’);}function green() { console.log(’green’);}function yellow() { console.log(’yellow’);}

這道題復(fù)雜的地方在于需要“交替重復(fù)”亮燈，而不是亮完一遍就結(jié)束的一錘子買賣，我們可以通過遞歸來實現(xiàn)：

// 用 promise 實現(xiàn)let task = (timer, light) => { return new Promise((resolve, reject) => { setTimeout(() => { if (light === ’red’) {red() } if (light === ’green’) {green() } if (light === ’yellow’) {yellow() } resolve() }, timer); })}let step = () => { task(3000, ’red’) .then(() => task(1000, ’green’)) .then(() => task(2000, ’yellow’)) .then(step)}step()

同樣也可以通過async/await 的實現(xiàn)：

// async/await 實現(xiàn)let step = async () => { await task(3000, ’red’) await task(1000, ’green’) await task(2000, ’yellow’) step()}step()

使用 async/await 可以實現(xiàn)用同步代碼的風(fēng)格來編寫異步代碼,毫無疑問，還是 async/await 的方案更加直觀，不過深入理解Promise 是掌握async/await的基礎(chǔ)

以上就是Javascript異步編程的詳細內(nèi)容，更多關(guān)于Javascript異步編程的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！