如何使用 JavaScript Promise 回調(diào)、異步等待和 Promise 方法解釋

在本教程中，您將學(xué)習(xí)有關(guān)在JavaScript中使用Promise和async/await所需了解的所有內(nèi)容。為什么在JavaScript中使用Promise？ES6引入了Promise作為原生實(shí)現(xiàn)。在ES6之前，我們使用回調(diào)來(lái)處理異步操作。讓我們了解什么是回調(diào)以及Promise解決了哪些與回調(diào)相關(guān)的問(wèn)題。假設(shè)我們有一個(gè)帖子列表及其各自的評(píng)論，如下所示：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span>posts<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#999999">[</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">1</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">post_title</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'FirstPost'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">2</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">post_title</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'SecondPost'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">3</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">post_title</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'ThirdPost'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">]</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">const</span>comments<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#999999">[</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">2</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">comment</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'Great!'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">2</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">comment</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'NicePost!'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">{</span><spanstyle="color:#990055">post_id</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#990055">3</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">comment</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">:</span></span><spanstyle="color:#669900">'AwesomePost!'</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">]</span><spanstyle="color:#999999">;</span></code></span>現(xiàn)在，我們將編寫(xiě)一個(gè)函數(shù)，通過(guò)傳遞帖子ID來(lái)獲取帖子。如果找到該帖子，我們將檢索與該帖子相關(guān)的評(píng)論。<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span><spanstyle="color:#dd4a68">getPost</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#999999">(</span>id<spanstyle="color:#999999">,</span>callback<spanstyle="color:#999999">)</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>post<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span>posts<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">find</span><spanstyle="color:#999999">(</span>post<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span>post<spanstyle="color:#999999">.</span>post_id<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">===</span></span>id<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span>post<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">callback</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">null</span><spanstyle="color:#999999">,</span>post<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#0077aa">else</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">callback</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">"Nosuchpostfound"</span><spanstyle="color:#999999">,</span><spanstyle="color:#0077aa">undefined</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">const</span><spanstyle="color:#dd4a68">getComments</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#999999">(</span>post_id<spanstyle="color:#999999">,</span>callback<spanstyle="color:#999999">)</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>result<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span>comments<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">filter</span><spanstyle="color:#999999">(</span>comment<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span>comment<spanstyle="color:#999999">.</span>post_id<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">===</span></span>post_id<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">callback</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">null</span><spanstyle="color:#999999">,</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#0077aa">else</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">callback</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">"Nocommentsfound"</span><spanstyle="color:#999999">,</span><spanstyle="color:#0077aa">undefined</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">}</span></code></span>在上面的getPost函數(shù)中g(shù)etComments，如果出現(xiàn)錯(cuò)誤，我們會(huì)將其作為第一個(gè)參數(shù)傳遞。但是如果我們得到結(jié)果，我們將調(diào)用回調(diào)函數(shù)并將結(jié)果作為第二個(gè)參數(shù)傳遞給它。如果您熟悉Node.js，那么您就會(huì)知道這是每個(gè)Node.js回調(diào)函數(shù)中使用的非常常見(jiàn)的模式?，F(xiàn)在讓我們使用這些函數(shù)：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#dd4a68">getPost</span><spanstyle="color:#999999">(</span><spanstyle="color:#990055">2</span><spanstyle="color:#999999">,</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">,</span>post<spanstyle="color:#999999">)</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">return</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'Post:'</span><spanstyle="color:#999999">,</span>post<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#dd4a68">getComments</span><spanstyle="color:#999999">(</span>post<spanstyle="color:#999999">.</span>post_id<spanstyle="color:#999999">,</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">,</span>comments<spanstyle="color:#999999">)</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=></span></span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">return</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'Comments:'</span><spanstyle="color:#999999">,</span>comments<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>執(zhí)行上述代碼后，您將看到以下輸出：?+調(diào)用getPost和getComments函數(shù)的結(jié)果這是一個(gè)HYPERLINK\o"CodePen演示"CodePen演示。?

正如您所看到的，我們將getComments函數(shù)嵌套在getPost回調(diào)中?，F(xiàn)在想象一下，如果我們也想找到這些評(píng)論的點(diǎn)贊。這也會(huì)嵌套在getComments回調(diào)中，從而創(chuàng)建更多嵌套。這最終會(huì)讓代碼變得難以理解。這種回調(diào)嵌套稱為回調(diào)地獄。您可以看到錯(cuò)誤處理?xiàng)l件也在代碼中重復(fù)，這會(huì)創(chuàng)建重復(fù)的代碼-這不好。因此，為了解決這個(gè)問(wèn)題并允許異步操作，引入了Promise。JavaScript中的Promise是什么？Promise是JavaScript最重要的部分之一，但它們可能會(huì)令人困惑且難以理解。許多新開(kāi)發(fā)人員以及經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員都很難完全掌握它們。那么什么是承諾呢？Promise代表一個(gè)異步操作，其結(jié)果將在將來(lái)出現(xiàn)。在ES6之前，沒(méi)有辦法等待某些東西來(lái)執(zhí)行某些操作。例如，當(dāng)我們想要進(jìn)行API調(diào)用時(shí)，沒(méi)有辦法等到結(jié)果返回。為此，我們?cè)?jīng)使用JQuery或Ajax等外部庫(kù)，它們有自己的Promise實(shí)現(xiàn)。但Promise沒(méi)有JavaScript實(shí)現(xiàn)。但后來(lái)在ES6中添加了Promise作為原生實(shí)現(xiàn)?，F(xiàn)在，使用ES6中的Promise，我們可以自己進(jìn)行API調(diào)用，并等待它完成后再執(zhí)行某些操作。如何創(chuàng)建承諾要?jiǎng)?chuàng)建Promise，我們需要使用Promise如下的構(gòu)造函數(shù)：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span>promise<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>構(gòu)造Promise函數(shù)將函數(shù)作為參數(shù)，該函數(shù)在內(nèi)部接收resolve和reject作為參數(shù)。和參數(shù)實(shí)際上是我們可以根據(jù)異步操作的結(jié)果調(diào)用的函數(shù)resolve。rejectAPromise可以經(jīng)歷三種狀態(tài)：待辦的實(shí)現(xiàn)了拒絕當(dāng)我們創(chuàng)建一個(gè)承諾時(shí)，它處于待處理狀態(tài)。當(dāng)我們調(diào)用該resolve函數(shù)時(shí)，它會(huì)進(jìn)入已完成狀態(tài)，如果我們調(diào)用reject它，它將進(jìn)入拒絕狀態(tài)。為了模擬長(zhǎng)時(shí)間運(yùn)行或異步操作，我們將使用該setTimeout函數(shù)。<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span>promise<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">setTimeout</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>sum<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#990055">4</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">+</span></span><spanstyle="color:#990055">5</span><spanstyle="color:#999999">;</span><spanstyle="color:#dd4a68">resolve</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">2000</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>在這里，我們創(chuàng)建了一個(gè)承諾，它將在2000毫秒（2秒）超時(shí)結(jié)束后解析為和的總和4。5為了獲得成功執(zhí)行Promise的結(jié)果，我們需要使用.then如下方式注冊(cè)一個(gè)回調(diào)處理程序：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span>promise<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">setTimeout</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>sum<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#990055">4</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">+</span></span><spanstyle="color:#990055">5</span><spanstyle="color:#999999">;</span><spanstyle="color:#dd4a68">resolve</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">2000</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span>promise<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">then</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#708090">//9</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>因此，每當(dāng)我們調(diào)用時(shí)resolve，promise都會(huì)返回傳遞給resolve函數(shù)的值，我們可以使用.then處理程序收集該值。如果操作不成功，那么我們r(jià)eject這樣調(diào)用該函數(shù)：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">const</span>promise<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">setTimeout</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>sum<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#990055">4</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">+</span></span><spanstyle="color:#990055">5</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">+</span></span><spanstyle="color:#669900">'a'</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span><spanstyle="color:#dd4a68">isNaN</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">reject</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'Errorwhilecalculatingsum.'</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#0077aa">else</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">resolve</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">2000</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span>promise<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">then</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>在這里，如果sum不是數(shù)字，則我們調(diào)用reject帶有錯(cuò)誤消息的函數(shù)。否則，我們調(diào)用該resolve函數(shù)。如果執(zhí)行上面的代碼，您將看到以下輸出：?在沒(méi)有catch處理程序的情況下拒絕Promise的結(jié)果正如您所看到的，我們收到一條未捕獲的錯(cuò)誤消息以及我們指定的消息，因?yàn)檎{(diào)用該reject函數(shù)會(huì)引發(fā)錯(cuò)誤。但我們還沒(méi)有添加錯(cuò)誤處理程序來(lái)捕獲該錯(cuò)誤。要捕獲錯(cuò)誤，我們需要使用.catch如下方式注冊(cè)另一個(gè)回調(diào)：<spanstyle="color:var(--gray85)"><codeclass="language-js">promise<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">then</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">catch</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>您將看到以下輸出：??使用catch處理程序拒絕承諾的結(jié)果正如您所看到的，我們已經(jīng)添加了.catch處理程序，因此我們沒(méi)有收到任何未捕獲的錯(cuò)誤-我們只是將錯(cuò)誤記錄到控制臺(tái)。這也可以避免突然停止您的應(yīng)用程序。因此，始終建議將.catch處理程序添加到每個(gè)Promise中，這樣您的應(yīng)用程序就不會(huì)因?yàn)殄e(cuò)誤而停止運(yùn)行。何時(shí)使用resolve以及reject讓我們舉一個(gè)API調(diào)用的例子。如果您正在進(jìn)行API調(diào)用并且API調(diào)用成功，則可以resolve通過(guò)將API結(jié)果作為參數(shù)傳遞給該函數(shù)來(lái)調(diào)用該函數(shù)。如果API不成功，您可以reject通過(guò)將任何消息作為參數(shù)傳遞給函數(shù)來(lái)調(diào)用該函數(shù)。因此，為了指示操作成功，我們調(diào)用該resolve函數(shù)；為了指示操作不成功，我們調(diào)用該reject函數(shù)。什么是PromiseChaining以及它為什么有用？Promise鏈?zhǔn)且环N用于以更有組織性和可讀性的方式管理異步操作的技術(shù)。在Promise鏈中，我們可以附加多個(gè).then處理程序，其中前一個(gè).then處理程序的結(jié)果會(huì)自動(dòng)傳遞到下一個(gè).then處理程序。使用承諾鏈有助于避免我們之前看到的回調(diào)地獄問(wèn)題。Promisechaining還允許我們以更加線性和順序的方式編寫(xiě)異步代碼，這更容易閱讀和理解。另外，當(dāng)使用Promise鏈時(shí)，我們只能.catch在所有處理程序的末尾附加一個(gè)處理程序.then。如果任何中間的Promise失敗，最后一個(gè).catch處理程序?qū)⒆詣?dòng)執(zhí)行。所以我們不需要添加多個(gè).catch處理程序。這消除了多重錯(cuò)誤檢查，就像我們之前在回調(diào)地獄示例中所做的那樣。Promise鏈如何工作我們可以.then向單個(gè)Promise添加多個(gè)處理程序，如下所示：<spanstyle="color:var(--gray85)"><codeclass="language-js">promise<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">then</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'first.thenhandler'</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">return</span>result<spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">then</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'second.thenhandler'</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>result<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">catch</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span>console<spanstyle="color:#999999">.</span><spanstyle="color:#dd4a68">log</span><spanstyle="color:#999999">(</span>error<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span></code></span>當(dāng)我們.then添加多個(gè)處理程序時(shí)，前一個(gè)處理程序的返回值.then會(huì)自動(dòng)傳遞給下一個(gè).then處理程序。?承諾鏈的結(jié)果正如您所看到的，添加4+5解決了一個(gè)承諾，我們?cè)诘谝粋€(gè).then處理程序中獲得了該總和。在那里，我們打印一條日志語(yǔ)句并將該總和返回到下一個(gè).then處理程序。在下一個(gè).then處理程序中，我們添加一條日志語(yǔ)句，然后打印從上一個(gè).then處理程序獲得的結(jié)果。這種添加多個(gè).then處理程序的方式稱為承諾鏈。如何在JavaScript中延遲Promise的執(zhí)行很多時(shí)候我們不希望Promise立即執(zhí)行。相反，我們希望它延遲到某些操作完成之后。為了實(shí)現(xiàn)這一點(diǎn)，我們可以將Promise包裝在一個(gè)函數(shù)中，并從該函數(shù)返回該P(yáng)romise，如下所示：<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">function</span><spanstyle="color:#dd4a68">createPromise</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">return</span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">setTimeout</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>sum<spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">=</span></span><spanstyle="color:#990055">4</span><spanstyle="background-color:rgba(255,255,255,0.5)"><spanstyle="color:#9a6e3a">+</span></span><spanstyle="color:#990055">5</span><spanstyle="color:#999999">;</span><spanstyle="color:#0077aa">if</span><spanstyle="color:#999999">(</span><spanstyle="color:#dd4a68">isNaN</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">reject</span><spanstyle="color:#999999">(</span><spanstyle="color:#669900">'Errorwhilecalculatingsum.'</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#0077aa">else</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">resolve</span><spanstyle="color:#999999">(</span>sum<spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">,</span><spanstyle="color:#990055">2000</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">;</span><spanstyle="color:#999999">}</span></code></span>這樣，我們就可以在Promise中使用函數(shù)參數(shù)，使函數(shù)真正動(dòng)態(tài)化。<spanstyle="color:var(--gray85)"><codeclass="language-js"><spanstyle="color:#0077aa">function</span><spanstyle="color:#dd4a68">createPromise</span><spanstyle="color:#999999">(</span>a<spanstyle="color:#999999">,</span>b<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">return</span><spanstyle="color:#0077aa">new</span><spanstyle="color:#dd4a68">Promise</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span>resolve<spanstyle="color:#999999">,</span>reject<spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#dd4a68">setTimeout</span><spanstyle="color:#999999">(</span><spanstyle="color:#0077aa">function</span><spanstyle="color:#999999">(</span><spanstyle="color:#999999">)</span><spanstyle="color:#999999">{</span><spanstyle="color:#0077aa">const</span>sum<spanstyle="background-color:rgba(25