<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

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

    發布時間:2021-06-15 10:37:09 來源:億速云 閱讀:91 作者:小新 欄目:web開發

    這篇文章主要為大家展示了“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的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2