1. 程式人生 > 程式設計 >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作為關鍵字放在函式前面,讓同步的函式成為非同步函式,不關函式裡返回什麼,打印出還是promise,說明async還是基於promise的,async的非同步方式還是比promise更加簡單優雅的。

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可以接收非同步函式,整個過程看上去有點像同步程式碼,但其實是非同步操作。

我們在fn()上加上一行程式碼

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

執行上面程式碼看到兩次都是在暫停一秒打印出來的,這說明await的後面如果是promise(耗時操作),它會阻塞整個函式,下面的程式碼不會執行。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。