async、await 实现原理

<h1>JavaScript 异步编程回顾</h1><p>由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。</p><h2>1. 回调函数</h2><p>回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。</p><pre><code class="language-js">const fs = require('fs')
fs.readFile('/etc/passwd', (err, data) =&gt; {
  if (err) {
    console.error(err)
    return
  }
  console.log(data.toString())
})</code></pre><p>回调函数最大的问题是容易形成回调地狱，即多个回调函数嵌套，降低代码可读性，增加逻辑的复杂性，容易出错。</p><pre><code class="language-js">fs.readFile(fileA, function (err, data) {
  fs.readFile(fileB, function (err, data) {
    // ...
  })
})</code></pre><h2>2. Promise</h2><p>为解决回调函数的不足，社区创造出 Promise。</p><pre><code class="language-js">const fs = require('fs')

readFileWithPromise('/etc/passwd')
  .then(data =&gt; {
    console.log(data.toString())
    return readFileWithPromise('/etc/profile')
  })
  .then(data =&gt; {
    console.log(data.toString())
  })
  .catch(err =&gt; {
    console.log(err)
  })</code></pre><p>简单的 Promise 实现，窥探下本质</p><p>Promise 实际上是利用编程技巧将回调函数的横向加载，改成纵向加载，达到链式调用的效果，避免回调地狱。最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。</p><h2>3. async、await</h2><p>为了解决 Promise 的问题，async、await 在 ES8 中被提了出来，是目前为止最好的解决方案</p><pre><code class="language-js">const fs = require('fs')
async function readFile() {
  try {    
    var f1 = await readFileWithPromise('/etc/passwd')
    console.log(f1.toString())
    var f2 = await readFileWithPromise('/etc/profile')
    console.log(f2.toString())
  } catch (err) {
    console.log(err)
  }
}\</code></pre><p>async、await 函数写起来跟同步函数一样，条件是需要接收 Promise 或原始类型的值。异步编程的最终目标是转换成人类最容易理解的形式。</p><h1>async、await</h1><p>分析 async、await 实现原理之前，先介绍下预备知识</p><h2>1. generator</h2><p>generator 函数是协程在 ES6 的实现。协程简单来说就是多个线程互相协作，完成异步任务。</p><p>整个 generator 函数就是一个封装的异步任务，异步操作需要暂停的地方，都用 yield 语句注明。generator 函数的执行方法如下：</p><pre><code class="language-js">function* gen(x) {
  console.log('start')
  const y = yield x * 2
  return y
}

run(readFileWithGen)
  .then(res =&gt; console.log(res))
  .catch(err =&gt; console.log(err))</code></pre><p>generator 可以暂停执行，很容易让它和异步操作产生联系，因为我们在处理异步操作时，在等待的时候可以暂停当前任务，把程序控制权交还给其他程序，当异步任务有返回时，在回调中再把控制权交还给之前的任务。generator 实际上并没有改变 JavaScript 单线程、使用回调处理异步任务的本质。</p><h2>3. co 函数库</h2><p>每次执行 generator 函数时自己写启动器比较麻烦。 <a href="https://github.com/tj/co" target="">co函数库</a> 是一个 generator 函数的自启动执行器，使用条件是 generator 函数的 yield 命令后面，只能是 thunk 函数或 Promise 对象，co 函数执行完返回一个 Promise 对象。</p><pre><code class="language-js">const co = require('co')
co(readFileWithGen).then(res =&gt; console.log(res)) // 'done'
co(readFileThunkWithGen).then(res =&gt; console.log(res)) // 'done'</code></pre><p>co 函数库的源码实现其实就是把上面两种情况做了综合:</p><pre><code class="language-js">// 做了简化，与源码基本一致
const co = (generator, ...rest) =&gt; {
  const ctx = this
  return new Promise((resolve, reject) =&gt; {
    const gen = generator.call(ctx, ...rest)
    if (!gen || typeof gen.next !== 'function') {
      return resolve(gen)
    }

const onFulfilled = res =&gt; {
      let ret
      try {
        ret = gen.next(res)
      } catch (e) {
        return reject(e)
      }
      next(ret)
    }

const onRejected = err =&gt; {
      let ret
      try {
        ret = gen.throw(err)
      } catch (e) {
        return reject(e)
      }
      next(ret)
    }

const next = result =&gt; {
      if (result.done) {
        return resolve(result.value)
      }
      toPromise(result.value).then(onFulfilled, onRejected)
    }

onFulfilled()
  })  
}

// async await
async function readfile() {
  try {
    const content1 = await readFileWithPromise('/etc/passwd', 'utf8')
    console.log(content1)
    const content2 = await readFileWithPromise('/etc/profile', 'utf8')
    console.log(content2)
    return 'done'
  } catch (err) {
    throw(err)
  }
}
readfile().then(
  res =&gt; console.log(res),
  err =&gt; console.error(err)
)</code></pre><h1>总结</h1><p>不论以上哪种方式，都没有改变 JavaScript 单线程、使用回调处理异步任务的本质。人类总是追求最简单易于理解的编程方式。</p>

DreamCoders / CoderGuide

Content Risk Flag

Comments (0)

DreamCoders / CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag