JavaScript中async和await的实现原理

由于javascript是单线程的执行模型,因此为了提高效率就有了异步编程,单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。 但是我们也需要类似多线程机制的这种执行方式,我们需要异步执行编程,异步执行编程会使得多个任务并发执行。 异步编程可以实现多任务并发执行,指同一时刻内多任务同时进行,边煮饭,边烧水,可以同时进行,进而提高效率。

1.回调函数

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

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

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

fs.readFile(file1, function (err, data) {
  fs.readFile(file2, 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 包装了一下,优点是减少代码嵌套,代码逻辑清晰。

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 = await readFileWithPromise('/etc/profile')
    console.log(f2.toString())
  } catch (err) {
    console.log(err)
  }
}

特点:

1.异步async函数的调用,跟普通的函数使用方式一样;

2.async的用法,它作为一个关键字放到函数前面,这样普通函数就变成了异步函数;

3.异步async函数返回一个promise对象;

4.async函数配合await使用可以阻塞代码往下执行,是异步方法。

优点:

1.多个参数传递:promise使用then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合比较麻烦;而利用async和await可以没有这个限制,可以当做普通变量的局部变量来处理,也没有冗余工作;

2.同步和异步一起编写:使用promise的时候最好将同步代码和异步代码放在不同的then节点中,这样结构更加清晰;async和await整个书写习惯都是同步的,不需要纠结同步和异步的区别,当然,异步过程需要包装成一个promise对象放在await关键字后面;

3. 对promise的优化:async和await是基于promise的,是进一步的一种优化。

使用场景:

async和await主要用来处理异步的操作,执行第一步,将执行第一步的结果返回给第二步使用,在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。

你可能感兴趣的:(javascript,javascript)