本文介紹了三分鐘學會用ES7中的Async/Await進行異步編程,分享給大家,具體如下:
Async/Await基本規則
一個Async/Await例子
Async/Await應該是目前最簡單的異步方案了,首先來看個例子。
這里我們要實現一個暫停功能,輸入N毫秒,則停頓N毫秒后才繼續往下執行。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, time); })};var start = async function () { // 在這里使用起來就像同步代碼那樣直觀 console.log('start'); await sleep(3000); console.log('end');};start();控制臺先輸出start,稍等3秒后,輸出了end。
獲得返回值
await等待的雖然是promise對象,但不必寫.then(..),直接可以得到返回值。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 返回 ‘ok' resolve('ok'); }, time); })};var start = async function () { let result = await sleep(3000); console.log(result); // 收到 ‘ok'};捕捉錯誤
既然.then(..)不用寫了,那么.catch(..)也不用寫,可以直接用標準的try catch語法捕捉錯誤。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 模擬出錯了,返回 ‘error' reject('error'); }, time); })};var start = async function () { try { console.log('start'); await sleep(3000); // 這里得到了一個返回錯誤 // 所以以下代碼不會被執行了 console.log('end'); } catch (err) { console.log(err); // 這里捕捉到錯誤 `error` }};循環多個await
await看起來就像是同步代碼,所以可以理所當然的寫在for循環里,不必擔心以往需要閉包才能解決的問題。
..省略以上代碼var start = async function () { for (var i = 1; i <= 10; i++) { console.log(`當前是第${i}次等待..`); await sleep(1000); }};值得注意的是,await必須在async函數的上下文中的。
..省略以上代碼let 一到十 = [1,2,3,4,5,6,7,8,9,10];// 錯誤示范一到十.forEach(function (v) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 錯誤!! await只能在async函數中運行});// 正確示范for(var v of 一到十) { console.log(`當前是第${v}次等待..`); await sleep(1000); // 正確, for循環的上下文還在async函數中}以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答