async/await的来龙去脉
Jun 15, 2020 am 09:53 AM前言
在面试的时候,async/await是很能看出应试者知识面的一个点。当然自己也没想好从什么角度去阐释这个知识点。当面试管问的时候,你可以答自执行的generator的语法糖。但是自己有些过实现么,或者是看过他的实现。
babel是如何来实现的
注:对于generator不了解的,可以先去看一下generator,顺带可以把iterator看了。
ex代码:
async function t() { const x = await getResult(); const y = await getResult2(); return x + y; }
babel转化代码
"use strict"; function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } function t() { return _t.apply(this, arguments); } function _t() { _t = _asyncToGenerator(function* () { const x = yield getResult(); const y = yield getResult2(); return x + y; }); return _t.apply(this, arguments); }
从代码中可以看出,babel
将一个generator
转化为async
用了两步_asyncToGenerator
和asyncGeneratorStep
。
_asyncToGenerator
干了什么
1、调用_asyncToGenerator
返回了一个promise
,刚好符合async
函数可以接then
的特性。
2、定义了一个成功的方法_next
,定义了一个失败的方法_throw
。两个函数中是调用asyncGeneratorStep
。看完asyncGeneratorStep
就知道这其实是一个递归。
3、执行_next
。也就是上面说的自执行的generator。
asyncGeneratorStep
干了什么
1、try-catch去捕获generator
执行过程中的错误。如果有报错,async
函数直接是reject
状态。
2、判断info
中的done
值,是否为true,为true就代表迭代器已经执行完毕了,可以将value值resolve
出去。反之,则继续调用_next
将值传递到下一个去。
这里我唯一没有看明白的是`_throw`,这个看代码像是执行不到的。promise.resolve状态值应该是fulfilled。看懂的 可以在评论中和我说一下,感谢。
async/await的优势
每当一种新的语法糖出现,必定是弥补上一代解决方案的缺陷。
ex:
promise的出现,是为了去避免callback hell
,避免的方式就是链式调用。
那async/await为了去解决什么呢?
用async/await去替换掉promise的几点必要性
同步的方式处理异步
async/await更贴近于同步性的风格,而promise则是用then的方式,于async/await相比,代码会变多,而且async/await和同步函数差别不大,promise则写法上还是有差距的。
promise和async/await代码对比
promise版
function getData() { getRes().then((res) => { console.log(res); }) }
async/await版
const getData = async function() { const res = await getRes(); console.log(res); }
中间值
用promise的时候会发现,多个promise串行的时候,后面的promise需要去获取前面promise的值是非常困难的。而async恰好解决了这个点。
promise获取中间值的例子
const morePromise = () => { return promiseFun1().then((value1) => { return promiseFun2(value1).then((value2) => { return promiseFun3(value1, value2).then((res) => { console.log(res); }) }) }) }
上面是嵌套版本的,可能根据不同的需求可以不嵌套的。
const morePromise = () => { return promiseFun1().then((value1) => { return promiseAll([value1, promiseFun2(value1)]) }).then(([value1, value2]) => { return promiseFun3(value1, value2).then((res) => { console.log(res); }) }) }
少了嵌套层级,但是还是不尽如人意。
用async/await优化例子
const morePromise = async function() { const value1 = await promiseFun1(); const value2 = await promiseFun2(value1); const res = await promiseFun3(value1, valuw2); return res; }
串行的异步流程,必定会有中间值的牵扯,所以async/await的优势就很明显了。
条件语句的情况
比如,目前有个需求,你请求完一个数据之后,再去判断是否还需要请求更多数据。用promise去实现还是会出现嵌套层级。
const a = () => { return getResult().then((data) => { if(data.hasMore) { return getMoreRes(data).then((dataMore) => { return dataMore; }) } else { return data; } }) }
但是用async去优化这个例子的话,能使代码更加优美。
async/await优化例子
const a = async() => { const data = await getResult(); if(data.hasMore) { const dataMore = await getMoreRes(data); return dataMore; } else { return data; } }
async/await的劣势
上面我们讲了几点async/await的优势所在,但是async/await也不是万能的。上面清一色的是讲串联异步的场景。当我们变成并联异步场景时。还是需要借助于promise.all来实现
并联异步的场景
const a = async function() { const res = await Promise.all[getRes1(), getRes2()]; return res; }
async/await的错误处理
async/await在错误捕获方面主要使用的是try-catch。
try-catch
const a = async () => { try{ const res = await Promise.reject(1); } catch(err) { console.log(err); } }
promise的catch
可以抽离一个公共函数来做这件事情。因为每个promise后面都去做catch的处理,代码会写的很冗长。
const a = async function() { const res = await Promise.reject(1).catch((err) => { console.log(err); }) }
// 公共函数 function errWrap(promise) { return promise().then((data) => { return [null, data]; }).catch((err) => { return [err, null]; }) }
推荐教程:《JS教程》
Atas ialah kandungan terperinci async/await的来龙去脉. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
