async、await 实现原理

最新推荐文章于 2024-02-18 13:41:31 发布

IT-小马哥

最新推荐文章于 2024-02-18 13:41:31 发布

阅读量675

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/james324/article/details/116715685

版权

本文回顾了JavaScript异步编程的发展，从回调函数到Promise，再到ES7引入的async、await。async、await通过generator和Promise实现了更简洁的异步代码，类似于同步编程的写法，降低了异步编程的复杂性。文章详细介绍了generator、thunk函数、co库以及async、await的工作原理，旨在帮助读者深入理解这一机制。

摘要由CSDN通过智能技术生成

JavaScript 异步编程回顾

由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。

1. 回调函数

回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

const fs = require('fs')
fs.readFile('/etc/passwd', (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data.toString())
})

回调函数最大的问题是容易形成回调地狱，即多个回调函数嵌套，降低代码可读性，增加逻辑的复杂性，容易出错。

fs.readFile(fileA, function (err, data) {
  fs.readFile(fileB, function (err, data) {
    // ...
  })
})

2. Promise

为解决回调函数的不足，社区创造出 Promise。

const fs = require('fs')

const readFileWithPromise = file => {
  return new Promise((resolve, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

readFileWithPromise('/etc/passwd')
  .then(data => {
    console.log(data.toString())
    return readFileWithPromise('/etc/profile')
  })
  .then(data => {
    console.log(data.toString())
  })
  .catch(err => {
    console.log(err)
  })

简单的 Promise 实现，窥探下本质

Promise 实际上是利用编程技巧将回调函数的横向加载，改成纵向加载，达到链式调用的效果，避免回调地狱。最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

3. async、await

为了解决 Promise 的问题，async、await 在 ES7 中被提了出来，是目前为止最好的解决方案

const fs = require('fs')
async function readFile() {
  try {    
    var f1 = await readFileWithPromise('/etc/passwd')
    console.log(f1.toString())
    var f2 = awa

最低0.47元/天解锁文章