async和await的实现原理

  • async和await的实现原理已关闭评论
  • 221 次浏览
  • A+
所属分类:Web前端
摘要

由于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(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中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。