电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JavaScript async/await原理及實(shí)例解析

瀏覽:91日期:2023-10-06 18:33:23

隨著Node 7的發(fā)布,越來(lái)越多的人開(kāi)始研究據(jù)說(shuō)是異步編程終級(jí)解決方案的 async/await。

異步編程的最高境界,就是根本不用關(guān)心它是不是異步。

async 函數(shù)就是隧道盡頭的亮光,很多人認(rèn)為它是異步操作的終極解決方案。

async 和 await 起了什么作用

async 起什么作用

這個(gè)問(wèn)題的關(guān)鍵在于,async 函數(shù)是怎么處理它的返回值的!

我們當(dāng)然希望它能直接通過(guò)return語(yǔ)句返回我們想要的值,但是如果真是這樣,似乎就沒(méi) await 什么事了。所以,寫(xiě)段代碼來(lái)試試,看它到底會(huì)返回什么:

async function testAsync() { return 'hello async';}const result = testAsync();console.log(result);

看到輸出就恍然大悟了——輸出的是一個(gè) Promise 對(duì)象。

c:vartest> node --harmony_async_await .Promise { ’hello async’ }

所以,async 函數(shù)返回的是一個(gè) Promise 對(duì)象。從文檔中也可以得到這個(gè)信息。async 函數(shù)(包含函數(shù)語(yǔ)句、函數(shù)表達(dá)式、Lambda表達(dá)式)會(huì)返回一個(gè) Promise 對(duì)象,如果在函數(shù)中return一個(gè)直接量,async 會(huì)把這個(gè)直接量通過(guò)Promise.resolve()封裝成 Promise 對(duì)象。

async 函數(shù)返回的是一個(gè) Promise 對(duì)象,所以在最外層不能用 await 獲取其返回值的情況下,我們當(dāng)然應(yīng)該用原來(lái)的方式:then()鏈來(lái)處理這個(gè) Promise 對(duì)象,就像這樣

testAsync().then(v => { console.log(v); // 輸出 hello async});

語(yǔ)法很簡(jiǎn)單,就是在函數(shù)前面加上async關(guān)鍵字,來(lái)表示它是異步的,那怎么調(diào)用呢?async函數(shù)也是函數(shù),平時(shí)我們?cè)趺词褂煤瘮?shù)就怎么使用它,直接加括號(hào)調(diào)用就可以了,為了表示它沒(méi)有阻塞它后面代碼的執(zhí)行,我們?cè)赼sync函數(shù)調(diào)用之后加一句console.log;

async function timeout() { return ’hello world’}timeout();console.log(’雖然在后面,但是我先執(zhí)行’);

打開(kāi)瀏覽器控制臺(tái),我們看到了

JavaScript async/await原理及實(shí)例解析

async函數(shù) timeout 調(diào)用了,但是沒(méi)有任何輸出,它不是應(yīng)該返回 ’hello world’, 先不要著急,看一看timeout()執(zhí)行返回了什么?把上面的 timeout()語(yǔ)句改為console.log(timeout())

async function timeout() { return ’hello world’}console.log(timeout());console.log(’雖然在后面,但是我先執(zhí)行’);

繼續(xù)看控制臺(tái)

JavaScript async/await原理及實(shí)例解析

原來(lái)async函數(shù)返回的是一個(gè)promise對(duì)象,如果要獲取到promise返回值,我們應(yīng)該用then方法,繼續(xù)修改代碼

async function timeout() { return ’hello world’}timeout().then(result => { console.log(result);})console.log(’雖然在后面,但是我先執(zhí)行’);

看控制臺(tái)

JavaScript async/await原理及實(shí)例解析

我們獲取到了'hello world’, 同時(shí)timeout的執(zhí)行也沒(méi)有阻塞后面代碼的執(zhí)行,和我們剛才說(shuō)的一致。

這時(shí),你可能注意到控制臺(tái)中的Promise有一個(gè)resolved,這是async函數(shù)內(nèi)部的實(shí)現(xiàn)原理。如果async函數(shù)中有返回一個(gè)值 ,當(dāng)調(diào)用該函數(shù)時(shí),內(nèi)部會(huì)調(diào)用Promise.solve()方法把它轉(zhuǎn)化成一個(gè)promise對(duì)象作為返回,但如果timeout函數(shù)內(nèi)部拋出錯(cuò)誤呢? 那么就會(huì)調(diào)用Promise.reject()返回一個(gè)promise對(duì)象,這時(shí)修改一下timeout函數(shù)

async function timeout(flag) { if (flag) { return ’hello world’ } else { throw ’my god, failure’ }}console.log(timeout(true)) // 調(diào)用Promise.resolve() 返回promise 對(duì)象。console.log(timeout(false)); // 調(diào)用Promise.reject() 返回promise 對(duì)象。

控制臺(tái)如下:

JavaScript async/await原理及實(shí)例解析

如果函數(shù)內(nèi)部拋出錯(cuò)誤, promise對(duì)象有一個(gè)catch方法進(jìn)行捕獲。

timeout(false).catch(err => { console.log(err)})

async關(guān)鍵字差不多了,我們?cè)賮?lái)考慮await關(guān)鍵字,await是等待的意思,那么它等待什么呢,它后面跟著什么呢?其實(shí)它后面可以放任何表達(dá)式,不過(guò)我們更多的是放一個(gè)返回promise對(duì)象的表達(dá)式。注意await關(guān)鍵字只能放到async函數(shù)里面

現(xiàn)在寫(xiě)一個(gè)函數(shù),讓它返回promise對(duì)象,該函數(shù)的作用是2s之后讓數(shù)值乘以2

// 2s 之后返回雙倍的值function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } )}

現(xiàn)在再寫(xiě)一個(gè)async函數(shù),從而可以使用await關(guān)鍵字, await后面放置的就是返回promise對(duì)象的一個(gè)表達(dá)式,所以它后面可以寫(xiě)上doubleAfter2seconds函數(shù)的調(diào)用

async function testResult() { let result = await doubleAfter2seconds(30); console.log(result);}

現(xiàn)在調(diào)用testResult函數(shù)

testResult();

打開(kāi)控制臺(tái),2s之后,輸出了60.

現(xiàn)在我們看看代碼的執(zhí)行過(guò)程,調(diào)用testResult函數(shù),它里面遇到了await, await表示等一下,代碼就暫停到這里,不再向下執(zhí)行了,它等什么呢?等后面的promise對(duì)象執(zhí)行完畢,然后拿到promise resolve的值并進(jìn)行返回,返回值拿到之后,它繼續(xù)向下執(zhí)行。具體到我們的代碼,遇到await之后,代碼就暫停執(zhí)行了,等待doubleAfter2seconds(30) 執(zhí)行完畢,doubleAfter2seconds(30)返回的promise開(kāi)始執(zhí)行,2秒之后,promise resolve了,并返回了值為60,這時(shí)await才拿到返回值60,然后賦值給result,暫停結(jié)束,代碼才開(kāi)始繼續(xù)執(zhí)行,執(zhí)行 console.log語(yǔ)句。

就這一個(gè)函數(shù),我們可能看不出async/await的作用,如果我們要計(jì)算3個(gè)數(shù)的值,然后把得到的值進(jìn)行輸出呢?

async function testResult() { let first = await doubleAfter2seconds(30); let second = await doubleAfter2seconds(50); let third = await doubleAfter2seconds(30); console.log(first + second + third);}

6秒后,控制臺(tái)輸出220,我們可以看到,寫(xiě)異步代碼就像寫(xiě)同步代碼一樣了,再也沒(méi)有回調(diào)地域了。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 医学动画公司-制作3d医学动画视频-医疗医学演示动画制作-医学三维动画制作公司 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 泥沙分离_泥沙分离设备_泥砂分离机_洛阳隆中重工机械有限公司 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 高低温试验房-深圳高低温湿热箱-小型高低温冲击试验箱-爱佩试验设备 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 洛阳网站建设_洛阳网站优化_网站建设平台_洛阳香河网络科技有限公司 | 丹尼克尔拧紧枪_自动送钉机_智能电批_柔性振动盘_螺丝供料器品牌 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 代理记账_公司起名核名_公司注册_工商注册-睿婕实业有限公司 | MVE振动电机_MVE震动电机_MVE卧式振打电机-河南新乡德诚生产厂家 | 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | BOE画框屏-触摸一体机-触控查询一体机-触摸屏一体机价格-厂家直销-触发电子 | 氢氧化钙设备_厂家-淄博工贸有限公司 | 洛阳网站建设_洛阳网站优化_网站建设平台_洛阳香河网络科技有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 烽火安全网_加密软件、神盾软件官网 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | R507制冷剂,R22/R152a制冷剂厂家-浙江瀚凯制冷科技有限公司 | 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | CPSE安博会 | 接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备 | 碳刷_刷握_集电环_恒压簧_电刷厂家-上海丹臻机电科技有限公司 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 防水接头-电缆防水接头-金属-电缆密封接头-不锈钢电缆接头 | 传爱自考网_传爱自学考试网| 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 校园气象站_超声波气象站_农业气象站_雨量监测站_风途科技 | 丝杆升降机-不锈钢丝杆升降机-非标定制丝杆升降机厂家-山东鑫光减速机有限公司 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 耐驰泵阀管件制造-耐驰泵阀科技(天津)有限公司 | 层流手术室净化装修-检验科ICU改造施工-华锐净化工程-特殊科室建设厂家 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 英国雷迪地下管线探测仪-雷迪RD8100管线仪-多功能数字听漏仪-北京迪瑞进创科技有限公司 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 |