1.介绍
- 它是使用了 Generator 函数基于 Promise 的封装,是 Promise 的一个语法糖;
- 它是一种异步编程的解决方案,可以以同步的代码方式来写异步;
- await 关键字可以“暂停”async function 的执行;
- 可以用 try-catch 捕获到 async function 所得到的错误;
2.基本使用
声明两个 promise 对象:
1 | const promise1 = new Promise((resolve, reject) => { |
传统的方式:
1 | promise1.then((res) => { |
async await 方式
1 | async function asyncFunc() { |
3.进阶使用
场景:要做三件事,下一件事依赖上一件事返回的结果;
假设:dosomething 返回的是 Promise;
处理顺序:dosomething1 => dosomething2 => dosomething3;
1 | // 传统的方式 (可以看到存在多重嵌套,错误处理也需要单独写) |
注意,如果每件事没有相互之间的依赖,使用了上面的那种方式后,会增加得到结果的时间(明明可以并行处理的,但是变成了串行);可以考虑使用 Promise.all 来执行:
1 | const [res1, res2, res3] = await Promise.all([ |
4.原理解读
Generator 函数
Generator 函数,可以通过 yield 关键字,把函数的执行流挂起,通过 next()方法可以切换到下一个状态,可以控制代码执行流程(暂停和继续),从而为异步编程提供解决方案。
基本使用:
1 | function* myGenerator() { |
可以通过给 next()传参, 让 yield 具有返回值:
1 | function* myGenerator() { |
await async 的规范
- async 函数会自动返回一个 Promise 对象;
- await 关键字能够返回 Promise 的 resolve 的值;
- await 关键字必须用作 async 函数内;
实现思路
- 相同:可以看到 */yield 和 async/await 这两个关键词有点类似的;
- 不同:await 每一步可以自动执行,不需要手动调用 next()就能自动执行下一步;
- 不同:asnyc 返回的是一个 Promise, Generator 函数返回的是一个迭代器对象;
所以我们需要封装一个返回 Promise 对象的并且可以自动执行的 Generator 函数的函数:
1 | //通过包一层runAsync函数 模拟await async |
I'm so cute. Please give me money.
- Post link: https://blog.gaocaipeng.com/2019/05/14/zb0k7o/
- Copyright Notice: All articles in this blog are licensed under unless otherwise stated.