前言
成都創(chuàng)新互聯(lián)公司專注于嫩江網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供嫩江營銷型網(wǎng)站建設(shè),嫩江網(wǎng)站制作、嫩江網(wǎng)頁設(shè)計、嫩江網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造嫩江網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供嫩江網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
在面試的時候,async/await是很能看出應(yīng)試者知識面的一個點。當(dāng)然自己也沒想好從什么角度去闡釋這個知識點。當(dāng)面試管問的時候,你可以答自執(zhí)行的generator的語法糖。但是自己有些過實現(xiàn)么,或者是看過他的實現(xiàn)。
babel是如何來實現(xiàn)的
注:對于generator不了解的,可以先去看一下generator,順帶可以把iterator看了。
ex代碼:
async function t() { const x = await getResult(); const y = await getResult2(); return x + y; }
babel轉(zhuǎn)化代碼
"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
轉(zhuǎn)化為async
用了兩步_asyncToGenerator
和asyncGeneratorStep
。
_asyncToGenerator
干了什么
1、調(diào)用_asyncToGenerator
返回了一個promise
,剛好符合async
函數(shù)可以接then
的特性。
2、定義了一個成功的方法_next
,定義了一個失敗的方法_throw
。兩個函數(shù)中是調(diào)用asyncGeneratorStep
??赐?code>asyncGeneratorStep就知道這其實是一個遞歸。
3、執(zhí)行_next
。也就是上面說的自執(zhí)行的generator。
asyncGeneratorStep
干了什么
1、try-catch去捕獲generator
執(zhí)行過程中的錯誤。如果有報錯,async
函數(shù)直接是reject
狀態(tài)。
2、判斷info
中的done
值,是否為true,為true就代表迭代器已經(jīng)執(zhí)行完畢了,可以將value值resolve
出去。反之,則繼續(xù)調(diào)用_next
將值傳遞到下一個去。
這里我唯一沒有看明白的是`_throw`,這個看代碼像是執(zhí)行不到的。promise.resolve狀態(tài)值應(yīng)該是fulfilled。看懂的 可以在評論中和我說一下,感謝。
async/await的優(yōu)勢
每當(dāng)一種新的語法糖出現(xiàn),必定是彌補上一代解決方案的缺陷。
ex:
promise的出現(xiàn),是為了去避免callback hell
,避免的方式就是鏈?zhǔn)秸{(diào)用。
那async/await為了去解決什么呢?
用async/await去替換掉promise的幾點必要性
同步的方式處理異步
async/await更貼近于同步性的風(fēng)格,而promise則是用then的方式,于async/await相比,代碼會變多,而且async/await和同步函數(shù)差別不大,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的時候會發(fā)現(xiàn),多個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); }) }) }) }
上面是嵌套版本的,可能根據(jù)不同的需求可以不嵌套的。
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優(yōu)化例子
const morePromise = async function() { const value1 = await promiseFun1(); const value2 = await promiseFun2(value1); const res = await promiseFun3(value1, valuw2); return res; }
串行的異步流程,必定會有中間值的牽扯,所以async/await的優(yōu)勢就很明顯了。
條件語句的情況
比如,目前有個需求,你請求完一個數(shù)據(jù)之后,再去判斷是否還需要請求更多數(shù)據(jù)。用promise去實現(xiàn)還是會出現(xiàn)嵌套層級。
const a = () => { return getResult().then((data) => { if(data.hasMore) { return getMoreRes(data).then((dataMore) => { return dataMore; }) } else { return data; } }) }
但是用async去優(yōu)化這個例子的話,能使代碼更加優(yōu)美。
async/await優(yōu)化例子
const a = async() => { const data = await getResult(); if(data.hasMore) { const dataMore = await getMoreRes(data); return dataMore; } else { return data; } }
async/await的劣勢
上面我們講了幾點async/await的優(yōu)勢所在,但是async/await也不是萬能的。上面清一色的是講串聯(lián)異步的場景。當(dāng)我們變成并聯(lián)異步場景時。還是需要借助于promise.all來實現(xiàn)
并聯(lián)異步的場景
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
可以抽離一個公共函數(shù)來做這件事情。因為每個promise后面都去做catch的處理,代碼會寫的很冗長。
const a = async function() { const res = await Promise.reject(1).catch((err) => { console.log(err); }) }
// 公共函數(shù) function errWrap(promise) { return promise().then((data) => { return [null, data]; }).catch((err) => { return [err, null]; }) }
以上就是async/await的來龍去脈的詳細(xì)內(nèi)容,更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!
網(wǎng)頁題目:async/await的應(yīng)用
文章出自:http://www.muchs.cn/article44/jpjshe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、App開發(fā)、網(wǎng)站策劃、搜索引擎優(yōu)化、面包屑導(dǎo)航、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)