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作為關(guān)鍵字放在函數(shù)前面，讓同步的函數(shù)成為異步函數(shù)，不關(guān)函數(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測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
一個實用的簡單的鼠標劃過切換效果,附帶ie6兼容png js2010-06-06
作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域鏈作簡單的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript。2014-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片切割功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
動態(tài)的創(chuàng)建一個元素createElement及刪除一個元素
本文用示例為大家介紹下動態(tài)創(chuàng)建一個元素createElement及刪除一個元素，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了javascript的慣性運動實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
關(guān)于Getter與Setter大家一定不會陌生,下面簡單介紹幾種我所知道的在JavaScript中實現(xiàn)G/S的方法.2010-12-12
這篇文章主要為大家詳細介紹了js如何驗證密碼強度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
深入探討JavaScript異步編程中Promise的關(guān)鍵要點
這篇文章將全面深入地探討Promise，包括其前身、歷史、能力、優(yōu)點、缺點以及提供每個方法的案例，感興趣的小伙伴可以跟隨小編一學(xué)習(xí)一下2023-06-06
uni-app使用uploadFile上傳多張圖片的具體實現(xiàn)
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實現(xiàn),需要的朋友可以參考下2023-04-04