JavaScript中回調、Promise和Async/Await的示例分析

這篇文章主要為大家展示了“JavaScript中回調、Promise和Async/Await的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript中回調、Promise和Async/Await的示例分析”這篇文章吧。

本文將通過代碼示例展示如何使用基于回調的 API，然后將其改成使用 Promises，最后再用 Async/Await  語法。本文不會詳細解釋回調、promise 和 Async/Await 語法。有關這些概念的詳細解釋，請查看 MDN 的 Asynchronous  JavaScript[1]，它解釋了什么是異步性以及如何用回調、promise 和 Async/Await 語法處理異步 JavaScript。

如果你對 JavaScript 中的異步有一定的了解，但需要一個直觀的代碼案例作為參考，那么本文就是給你準備的。

出于演示目的，我們將使用 fs.readFile[2]，這是一個基于回調的用于讀取文件的 API。我們將會先創建一個包含一些文本的文件  test.txt，然后用 script.js 來打開文件、讀取內容并將其輸出到終端。

代碼將首先用回調實現，然后將其修改為使用 Promise，最后改為使用 Async/Await，而不是直接使用 Promise。

廢話少說，開始!

使用回調

首先創建一個目錄，里面包含我們的代碼文件和要進行讀取操作的文件。

先創建著兩個文件;

$ mkdir ~/code $ touch ~/code/script.js $ echo "Beam me up, Scotty" > ~/code/test.txt $ cd ~/code/

在 script.js 文件中，輸入以下代碼：

const fs = require("fs")  function readFileCallBack() {  fs.readFile("./test.txt", 'utf8',  (err, data) => {   if (err) {     console.error(err)     return   }      console.log(data.trim() + " [callback]")  })  }  readFileCallBack()

通過 node script.js 命令執行腳本，會在終端上輸出“Beam me up, Scotty”：

$ node script.js Beam me up, Scotty [callback]

對于回調的寫法，異步操作的結果會被傳給執行異步操作的函數，并由其進行處理。

使用 Promise

修改 script.js 并添加一個使用 promise 的 readFileCallback 版本。代碼如下：

function readFilePromise() {   return new Promise((resolve, reject) => {      fs.readFile("./test.txt", 'utf8',  (err, data) => {      if (err) {        reject(err)        return      }        resolve(data.trim())     })   }); }   readFilePromise()  .then(data => console.log(data  + " [promise]"))  .catch(err => console.log(err))

通過 node script.js 命令來執行腳本：

$ node script.js Beam me up, Scotty [callback] Beam me up, Scotty [promise]

使用promise，異步操作的結果由傳遞給 promise 對象公開的 then 函數進行處理。

使用 Async/Await

修改 script.js 并添加使用 Async/Await 語法的第三個版本。由于 Async/Await 是一種能讓 promise  更容易的語法，所以 Async/Await 實現將使用 readFilePromise() 函數。代碼是這樣的：

async function readFileAsync() {   try {     const data = await readFilePromise()     console.log(data.trim() + " [async-await]")   } catch (err) {     console.log(err)   } }  readFileAsync()

Executing the script by running node script.js will print something similar  to this, to the terminal: 通過運行節點腳本執行腳本.js將打印與此類似的東西，到終端：

Beam me up, Scotty [callback] Beam me up, Scotty [promise] Beam me up, Scotty [async-await]

使用 async/await，異步操作的結果被當作同步操作來處理。await 對此負責，而使用它的函數必須以 async 關鍵字開頭。

3種實現的完整代碼如下：

const fs = require("fs")  // callback function readFileCallBack() {  fs.readFile("./test.txt", 'utf8',  (err, data) => {   if (err) {     console.error(err)     return   }   console.log(data.trim() + " [callback]")     })  }  readFileCallBack()  // promise function readFilePromise() {   return new Promise((resolve, reject) => {      fs.readFile("./test.txt", 'utf8',  (err, data) => {      if (err) {        reject(err)        return      }        resolve(data.trim())     })   }); }   readFilePromise()  .then(data => console.log(data  + " [promise]"))  .catch(err => console.log(err))   // async/await async function readFileAsync() {   try {     const data = await readFilePromise()     console.log(data.trim() + " [async-await]")   } catch (err) {     console.log(err)   } }  readFileAsync()

錯誤處理

為了驗證在 3 種代碼實現在工作時錯誤處理是否會按預期工作，重命名 test.txt 文件并重新運行腳本：

$ mv test.txt test.txt.backup $ node script.js [Error: ENOENT: no such file or directory, open './test.txt'] {   errno: -2,   code: 'ENOENT',   syscall: 'open',   path: './test.txt' } [Error: ENOENT: no such file or directory, open './test.txt'] {   errno: -2,   code: 'ENOENT',   syscall: 'open',   path: './test.txt' } [Error: ENOENT: no such file or directory, open './test.txt'] {   errno: -2,   code: 'ENOENT',   syscall: 'open',   path: './test.txt' }

3種實現都會顯示錯誤處理代碼(僅將錯誤輸出到控制臺)，說明它們都按預期執行了。

以上是“JavaScript中回調、Promise和Async/Await的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！