189 8069 5689

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

这篇文章主要为大家展示了“JavaScript中回调、Promise和Async/Await的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中回调、Promise和Async/Await的示例分析”这篇文章吧。

创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为定南企业提供专业的网站制作、网站建设定南网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

本文将通过代码示例展示如何使用基于回调的 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的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文题目:JavaScript中回调、Promise和Async/Await的示例分析
本文链接:http://jkwzsj.com/article/igsipd.html

其他资讯