Promise 是什么

promise 是一個(gè)簡(jiǎn)單的函數(shù)，它返回一個(gè)你可以回調(diào)的?Object(對(duì)象)。

promise 對(duì)象上的回調(diào)只有在操作完成時(shí)才會(huì)被調(diào)用。在之前，回調(diào)將不得不等待，直到操作被fulfilled?或?rejected：

在一個(gè) promise 最終確定之前（ promise 要么實(shí)現(xiàn)（fulfills），要么被拒絕（rejected）），它必須經(jīng)歷不同的狀態(tài)：

STATEDESCRIPTIONCALLBCAKpending意味著操作仍在運(yùn)行，promise 正在等待中-fulfilled操作已經(jīng)完成，并且很成功.then()rejected操作已完成，但出現(xiàn)了一個(gè)錯(cuò)誤.catch()settledpromise 要么已經(jīng) fulfilled ，要么被 rejected，無論如何，這個(gè)回調(diào)都會(huì)被調(diào)用.finally()

當(dāng)一個(gè) promise 被創(chuàng)建時(shí)，初始狀態(tài)是待定（pending）。然后根據(jù)操作的輸出，promise 要么被 fulfilled，要么被 rejected。

從上面的表格中，你可以很容易地看到根據(jù) Promise 的每個(gè)狀態(tài)而被調(diào)用的回調(diào)：

如何在 JavaScript 中使用 Promises

現(xiàn)在你已經(jīng)了解了什么是 promise，讓我們通過建立我們之前看到的電影搜索應(yīng)用來演示如何在 JavaScript 中使用 promise。

一個(gè)基本的電影搜索應(yīng)用程序應(yīng)該有一個(gè)輸入字段，用戶可以在那里搜索他們喜歡的電影。它還應(yīng)該有一個(gè)用戶界面來顯示他們所搜索的電影的一些基本信息。

讓我們從創(chuàng)建?HTML?開始。

如何編寫 HTML

為了本教程的目的和提供實(shí)際的例子，我將使用?Codepen，但你可以使用你喜歡的代碼編輯器。

創(chuàng)建一個(gè)index.html文件并添加以下代碼：

上面我們只是創(chuàng)建了我們的電影應(yīng)用程序的基礎(chǔ)。所以現(xiàn)在讓我們用一些 CSS 給它注入一些活力“

如何獲取電影

為了獲取我們的電影，我們將使用 TVMAZE 的 API。創(chuàng)建main.js文件并添加以下代碼：

我們創(chuàng)建了一個(gè)函數(shù)get_movie(value = "Game of thrones")，使用了 JavaScript fetch API。我們用它來向我們的電影 API 端點(diǎn)（endpoint）發(fā)出GET請(qǐng)求。

fetch API 會(huì)返回一個(gè) promise 。為了使用 API 的響應(yīng)，我們使用了.then()回調(diào)，其中我們將response.json()傳入一個(gè)新的函數(shù)create_UI()。讓我們繼續(xù)創(chuàng)建create_UI函數(shù):

上述函數(shù)，顧名思義，幫助我們?yōu)槲覀兊碾娪皯?yīng)用程序創(chuàng)建用戶界面。但當(dāng)然，我們?nèi)匀恍枰环N方法來收集用戶的電影名稱。

我們需要做的第一件事是給我們的 HTML 表單（form）添加一個(gè)onsubmit事件處理程序：

現(xiàn)在在我們的main.js文件中，我們通過提交表單時(shí)發(fā)生的事件觸發(fā)處理：

當(dāng)用戶提交表單時(shí)，我們就會(huì)得到他們?cè)谒阉骺蛑休斎氲闹担⑵鋫鬟f給我們先前創(chuàng)建的?get_movie(value = "Game of thrones")函數(shù)。

Promise 鏈

與我們?cè)谥暗睦又锌吹降牟煌?code>.then()回調(diào)并不是真正的結(jié)束。這是因?yàn)楫?dāng)你返回一個(gè)?promise?的值時(shí)，你會(huì)得到另一個(gè)?promise。當(dāng)你想按順序運(yùn)行一系列的異步操作時(shí)，這就變得非常有用。

例如，我們的電影 API 不只是返回一部電影的信息，它還返回所有劇集的信息。比方說，我們真的不想顯示《權(quán)力的游戲》中的所有劇集，我們只想要前四（4）集。

通過 promise chaining（鏈），我們可以很容易地實(shí)現(xiàn)這一點(diǎn)：

這仍然是我們的get_movie()函數(shù)，但這次我們不是將數(shù)據(jù)傳遞給create_UI函數(shù)，而是返回響應(yīng).then((response) => response.json())。這將創(chuàng)建一個(gè)新的?promise，我們可以將更多的回調(diào)添加到這個(gè)?promise?上。

理想情況下，這個(gè)鏈可以一直持續(xù)下去，只要你想。記住，你所要做的就是返回?promise?的值。

如何處理 Promises 中的錯(cuò)誤

在一個(gè)?promise?中發(fā)生的錯(cuò)誤會(huì)立即進(jìn)入 .catch()` 回調(diào)：

.catch()回調(diào)是.then(null, (error) => {})的簡(jiǎn)寫。你也可以把上面的內(nèi)容寫成：

以我們的電影搜索應(yīng)用為例，當(dāng)我們遇到任何錯(cuò)誤時(shí)，我們可以在.catch()回調(diào)中處理并向用戶顯示一個(gè)漂亮的錯(cuò)誤信息：

現(xiàn)在，如果由于任何原因產(chǎn)生的一個(gè)錯(cuò)誤，.catch()回調(diào)被調(diào)用，我們向用戶顯示當(dāng)前的錯(cuò)誤。

如何在 JavaScript 中創(chuàng)建 Promises

現(xiàn)在我們已經(jīng)了解了什么是?promise?以及如何使用它們，讓我們看看如何在 JavaScript 中創(chuàng)建一個(gè)?promise。

要在 JavaScript 中創(chuàng)建一個(gè)?promise，你需要使用?promise?構(gòu)造函數(shù)。構(gòu)造函數(shù)需要一個(gè)參數(shù)：一個(gè)有兩個(gè)參數(shù)的函數(shù)，resolve和reject：

然后我們可以通過回調(diào)來使用我們的?new_promise：

總結(jié)

在本教程中，我們學(xué)習(xí)了?promise，它們是什么，以及如何通過建立一個(gè)電影搜索應(yīng)用程序來使用它們。

更多學(xué)習(xí)資料關(guān)注馬哥教育? 私信UP主