async和await的实现原理

更新日期: 2022-04-26阅读: 721标签: async

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


链接: https://www.fly63.com/article/detial/11390

JS中的async/await的执行顺序详解

虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await

ES6新特性Async

Async实际上是一个封装了自动化执行并返回一个Promise的Generator函数的语法糖。这句话的意思我们可以分为三个部分来解读:首先它有一个自动化执行,Generator函数是依靠不停的调用.net来依次执行的,Async有一个自动化执行的过程

Node.js Async 函数最佳实践

Node.js7.6起, Node.js 搭载了有async函数功能的V8引擎。当Node.js 8于10月31日成为LTS版本后,我们没有理由不使用async函数。接下来,我将简要介绍async函数,以及如何改变我们编写Node.js应用程序的方式。

将async/await编译到 ES3/ES5 (外部帮助库)

自2015年11 发布1.7版以来,TypeScript 已支持 async/await 关键字。编译器使用 yield 将异步函数转换为生成器函数。这意味着咱们无法针对 ES3 或 ES5,因为生成器仅在 ES6 中引入的。

你可能忽略的 async/await 问题

async/await 大家肯定都用过,在处理异步操作的时候真的是很方便。那今天主要讲一些在使用 async/await 时容易忽略和犯错的地方。上面的代码中,每一行都会 等待上一行的结果返回后才会执行。

使用async await通过for循环在图片onload加载成功后获取成功的图片地址

有一个图片列表,我想要在图片onload成功之后获取加载成功的图片列表,图片资源加载为异步,我们使用ES7的async await方式实现,多张图片,是用for循环。

ES8 Async 和 Await

Async 和 Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作

有了 Promise 和 then,为什么还要使用 async?

最近代码写着写着,我突然意识到一个问题——我们既然已经有了 Promise 和 then,为啥还需要 async 和 await?这不是脱裤子放屁吗?

手写async await的最简实现

如果让你手写async函数的实现,你是不是会觉得很复杂?这篇文章带你用20行搞定它的核心。经常有人说async函数是generator函数的语法糖,那么到底是怎么样一个糖呢?让我们来一层层的剥开它的糖衣。

认识async/await

async/await是ES7的写法,可以让非同步call back写法看起来像同步的顺序去执行。以下我们new一个Promise的class并return给一个function

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!