快捷導(dǎo)航

ES6 async、await的基本使用方法示例

更新時(shí)間：2020年06月06日 10:19:09 作者：Jacano

這篇文章主要介紹了ES6 async、await的基本使用方法,結(jié)合實(shí)例形式分析了ES6 async、await的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

1.async的簡(jiǎn)單使用

async function fn () {
 return 'abc'
}
console.log(fn());                    // Promise { 'abc' }
fn().then(res => {
 console.log(res);                    // "abc"
})

async作為關(guān)鍵字放在函數(shù)前面，讓同步的函數(shù)成為異步函數(shù)，不關(guān)函數(shù)里返回什么，打印出還是promise，說(shuō)明async還是基于promise的，async的異步方式還是比promise更加簡(jiǎn)單優(yōu)雅的。

2.await的簡(jiǎn)單使用

// 這里模擬一個(gè)耗時(shí)操作
function asyncFunc() {
 return new Promise( resolve => {
  setTimeout(() => {
   resolve(100)
  }, 1000);
 })
}

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
}

fn()

一秒后打印出了100，async和await搭配使用，await可以接收異步函數(shù)，整個(gè)過(guò)程看上去有點(diǎn)像同步代碼，但其實(shí)是異步操作。

我們?cè)趂n()上加上一行代碼

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
 console.log(200);                    // 200
}

執(zhí)行上面代碼看到兩次都是在暫停一秒打印出來(lái)的，這說(shuō)明await的后面如果是promise(耗時(shí)操作)，它會(huì)阻塞整個(gè)函數(shù)，下面的代碼不會(huì)執(zhí)行。

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

在JavaScript中實(shí)現(xiàn)保留兩位小數(shù)的方法小結(jié)
在JavaScript中,處理數(shù)字并格式化它們以顯示特定的小數(shù)位數(shù)是一個(gè)常見(jiàn)的需求,特別是,當(dāng)你需要顯示貨幣、測(cè)量值或其他需要精確到兩位小數(shù)的數(shù)據(jù)時(shí),本文將詳細(xì)介紹幾種在JavaScript中實(shí)現(xiàn)保留兩位小數(shù)的方法,需要的朋友可以參考下
2024-11-11
JavaScript設(shè)計(jì)模式之工廠模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
webpack4從0搭建組件庫(kù)的實(shí)現(xiàn)
這篇文章主要介紹了webpack4從0搭建組件庫(kù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Webpack優(yōu)化配置縮小文件搜索范圍
這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關(guān)知識(shí)，文中較詳細(xì)的給大家介紹了可以?xún)?yōu)化的途徑,需要的朋友可以參考下
2017-12-12
window.ActiveXObject使用說(shuō)明
判斷瀏覽器是否支持ActiveX控件，如果瀏覽器支持ActiveX控件可以利用
2010-11-11
使用Promise進(jìn)行異步處理的操作步驟
在JavaScript中,異步操作是非常常見(jiàn)的,如網(wǎng)絡(luò)請(qǐng)求、文件操作、定時(shí)任務(wù)等,Promise是一種用于管理異步操作的解決方案,它使得異步代碼變得更易讀、易于組合和錯(cuò)誤處理更加集中,本文將詳細(xì)介紹如何使用Promise進(jìn)行錯(cuò)誤處理,需要的朋友可以參考下
2025-03-03
JS組件Bootstrap dropdown組件擴(kuò)展hover事件
bootstrap的下拉組件，需要點(diǎn)擊click時(shí)，方可展示下拉列表。因此對(duì)于喜歡簡(jiǎn)單少操作的大家來(lái)說(shuō)，點(diǎn)擊一下多少帶來(lái)不便，因此，引入hover監(jiān)聽(tīng)，鼠標(biāo)經(jīng)過(guò)自動(dòng)展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴(kuò)展hover事件，感興趣的小伙伴們可以參考一下
2016-04-04
JavaScript 中的 Map使用指南
本文詳細(xì)介紹了JavaScript中的Map數(shù)據(jù)結(jié)構(gòu),包括它的創(chuàng)建、常用方法、迭代方式以及與對(duì)象的區(qū)別,文章簡(jiǎn)要介紹了WeakMap的概念和使用場(chǎng)景,感興趣的朋友一起看看吧
2025-02-02
uniapp項(xiàng)目實(shí)踐封裝通用請(qǐng)求上傳以及下載方法總結(jié)
在日常開(kāi)發(fā)過(guò)程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁(yè)面中,接下來(lái)就總結(jié)一下?uniapp?中獲取請(qǐng)求、文件下載和上傳的一些方法
2023-09-09
HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07