ES6 async、await的基本使用方法示例
更新時間：2020年06月06日 10:19:09 作者：Jacano
這篇文章主要介紹了ES6 async、await的基本使用方法,結合實例形式分析了ES6 async、await的基本功能、使用方法與相關注意事項,需要的朋友可以參考下
本文實例講述了ES6 async、await的基本使用方法。分享給大家供大家參考，具體如下：
async是異步編程的最新標準，我們來看看async如何使用
1.async的簡單使用
async function fn () {
return 'abc'
}
console.log(fn()); // Promise { 'abc' }
fn().then(res => {
console.log(res); // "abc"
})
async作為關鍵字放在函數(shù)前面，讓同步的函數(shù)成為異步函數(shù)，不關函數(shù)里返回什么，打印出還是promise，說明async還是基于promise的，async的異步方式還是比promise更加簡單優(yōu)雅的。
2.await的簡單使用
// 這里模擬一個耗時操作
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ù)，整個過程看上去有點像同步代碼，但其實是異步操作。
我們在fn()上加上一行代碼
async function fn () {
let a = await asyncFunc();
console.log(a); // 100
console.log(200); // 200
}
執(zhí)行上面代碼看到兩次都是在暫停一秒打印出來的，這說明await的后面如果是promise(耗時操作)，它會阻塞整個函數(shù)，下面的代碼不會執(zhí)行。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
在JavaScript中實現(xiàn)保留兩位小數(shù)的方法小結
在JavaScript中,處理數(shù)字并格式化它們以顯示特定的小數(shù)位數(shù)是一個常見的需求,特別是,當你需要顯示貨幣、測量值或其他需要精確到兩位小數(shù)的數(shù)據(jù)時,本文將詳細介紹幾種在JavaScript中實現(xiàn)保留兩位小數(shù)的方法,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了JavaScript設計模式之工廠模式,結合完整實例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了webpack4從0搭建組件庫的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關知識，文中較詳細的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下2017-12-12
判斷瀏覽器是否支持ActiveX控件，如果瀏覽器支持ActiveX控件可以利用2010-11-11
在JavaScript中,異步操作是非常常見的,如網(wǎng)絡請求、文件操作、定時任務等,Promise是一種用于管理異步操作的解決方案,它使得異步代碼變得更易讀、易于組合和錯誤處理更加集中,本文將詳細介紹如何使用Promise進行錯誤處理,需要的朋友可以參考下2025-03-03
JS組件Bootstrap dropdown組件擴展hover事件
bootstrap的下拉組件，需要點擊click時，方可展示下拉列表。因此對于喜歡簡單少操作的大家來說，點擊一下多少帶來不便，因此，引入hover監(jiān)聽，鼠標經(jīng)過自動展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴展hover事件，感興趣的小伙伴們可以參考一下2016-04-04
本文詳細介紹了JavaScript中的Map數(shù)據(jù)結構,包括它的創(chuàng)建、常用方法、迭代方式以及與對象的區(qū)別,文章簡要介紹了WeakMap的概念和使用場景,感興趣的朋友一起看看吧2025-02-02
在日常開發(fā)過程中,前端經(jīng)常要和后端進行接口聯(lián)調,獲取并且渲染數(shù)據(jù)到頁面中,接下來就總結一下?uniapp?中獲取請求、文件下載和上傳的一些方法2023-09-09
HTML+CSS+JavaScript實現(xiàn)放大鏡效果
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07