ES7前端異步玩法：async/await理解
點擊上方藍色字體，選擇“標星公眾號”
優(yōu)質(zhì)文章，第一時間送達
什么是async、await？
1?async?function?testSync()?{
2??????const?response?=?await?new?Promise(resolve?=>?{
3??????????setTimeout(()?=>?{
4??????????????resolve("async?await?test...");
5???????????},?1000);
6??????});
7??????console.log(response);
8?}
9?testSync();//async?await?test...
?
async、await串行并行處理
串行：等待前面一個await執(zhí)行后接著執(zhí)行下一個await，以此類推
?1?async?function?asyncAwaitFn(str)?{
?2?????return?await?new?Promise((resolve,?reject)?=>?{
?3?????????setTimeout(()?=>?{
?4?????????????resolve(str)
?5?????????},?1000);
?6?????})
?7?}
?8?
?9?const?serialFn?=?async?()?=>?{?//串行執(zhí)行
10?
11?????console.time('serialFn')
12?????console.log(await?asyncAwaitFn('string?1'));
13?????console.log(await?asyncAwaitFn('string?2'));
14?????console.timeEnd('serialFn')
15?}
16?
17?serialFn();
并行：將多個promise直接發(fā)起請求（先執(zhí)行async所在函數(shù)），然后再進行await操作。
?1?async?function?asyncAwaitFn(str)?{
?2?????return?await?new?Promise((resolve,?reject)?=>?{
?3?????????setTimeout(()?=>?{
?4?????????????resolve(str)
?5?????????},?1000);
?6?????})
?7?}
?8?const?parallel?=?async?()?=>?{?//并行執(zhí)行
?9?????console.time('parallel')
10?????const?parallelOne?=?asyncAwaitFn('string?1');
11?????const?parallelTwo?=?asyncAwaitFn('string?2')
12?
13?????//直接打印
14?????console.log(await?parallelOne)
15?????console.log(await?parallelTwo)
16?
17?????console.timeEnd('parallel')
18?
19?
20?}
21?parallel()
async、await錯誤處理
?1?async?function?catchErr()?{
?2???????try?{
?3???????????const?errRes?=?await?new?Promise((resolve,?reject)?=>?{
?4?????????????????setTimeout(()?=>?{
?5?????????????????????reject("http?error...");
?6??????????????????},?1000);
?7????????????);
?8?????????????????//平常我們也可以在await請求成功后通過判斷當前status是不是200來判斷請求是否成功
?9?????????????????//?console.log(errRes.status,?errRes.statusText);
10?????????}?catch(err)?{
11??????????????console.log(err);
12?????????}
13?}
14?catchErr();?//http?error...
? 作者?|??割肉機
來源 |??cnblogs.com/williamjie/p/9789212.html
評論
圖片
表情