释放双眼,带上耳机,听听看~!

完全吃透async/await
0. 前言
ES7 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。
async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。
想较于 Generator,Async 函数的改进在于下面四点:
内置执行器。Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样
更好的语义。async 和 await 相较于 * 和 yield 更加语义化
更广的适用性。co 模块约定,yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)
返回值是 Promise。async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用
1. 基本语法
基本语法是 方法头 添加关键字async,在异步前 添加await
1. API
核心 API 就async 与 await,具体 直接将MDN中解释拿来用
async function 声明将定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数,它的语法和结构会更像是标准的同步函数。 MDN
白话:async 返回一个 Promise,也就是 最后return是不是 Promise 最终都会被包装成promise
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。MDN
表达式:
一个 Promise 对象或者任何要等待的值。
返回值:
(注意,返回并不是一个Promise对象,而是结果)
返回 Promise 对象的处理结果。
如果等待的不是 Promise 对象,则返回该值本身。
描述:
await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function。
若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。
另外,如果 await 操作符后的表达式的值不是一个 Promise,那么该值将被转换为一个已正常处理的 Promise。
2. 实践—简单用法
这会使 async 函数暂停执行,等待表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。
2. Async对比Promise优势
1. 解决then 多层回调
假设:假设一个业务,分多个步骤完成,每个步骤都是异步的,而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作:
2. 带catch
3.Async并行
0. 背景
前面解决都是 一个promise执行完后,再执行新的promise;而下面讨论是,两个Promise如何并行
1. 基本并行处理
2. 深入理解并行
上文基本的并行,并不是 正在的并行
参考:MDN 下面代码参考自 MDN
上面代码是4中,不同处理promise并行方式。但核心是不管怎样 await执行都会有顺序,会等待执行。
4. 并行——循环
1. for-of
2. 使用map并行执行
Array.prototype.map 与Array.prototype.forEach 执行promise数组,是并行。
但for-in for-of for都是串行的
5. 异常处理
0.异常分类
异常简单分为分为 执行异常和异步异常(通过是否能try-catch捕获来区分);
1. 基本套路
2. 链式处理
重点: 第二个 await没有执行,(‘2’没有打印);也就证明,async遇到异常 就会中断链,与Promise链式异常对比
3. 使用第三方模块bounce
6. 实现Async——todo
async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。
7. 容易出错
1. await 不是在async function内
8. Async 与其他异步操作的对比
先定义一个 Fetch 方法用于获取 github user 的信息:
Promise 方式
Promise 的方式虽然解决了 callback hell,但是这种方式充满了 Promise的 then() 方法,如果处理流程复杂的话,整段代码将充满 then。语义化不明显,代码流程不能很好的表示执行流程。
Generator 方式
Generator 的方式解决了 Promise 的一些问题,流程更加直观、语义化。但是 Generator 的问题在于,函数的执行需要依靠执行器,每次都需要通过 g.next() 的方式去执行。
async 方式
async 函数完美的解决了上面两种方式的问题。流程清晰,直观、语义明显。操作异步流程就如同操作同步流程。同时 async 函数自带执行器,执行的时候无需手动加载。
个人博客
更多前端技术文章、美术设计、wordpress插件、优化教程、学习笔记尽在我的个人博客喵容 – 和你一起描绘生活,欢迎一起交流学习,一起进步:https://www.miaoroom.com
站内文章推荐: