體驗異步的終極解決方案-ES7的Async/Await

閱讀本文前，期待您對promise和ES6(ECMA2015)有所瞭解，會更容易理解。
本文以體驗爲主，不會深刻說明，結尾有詳細的文章引用。

第一個例子

Async/Await應該是目前最簡單的異步方案了，首先來看個例子。

這裏咱們要實現一個暫停功能，輸入N毫秒，則停頓N毫秒後才繼續往下執行。

 1 var sleep = function (time) {  2     return new Promise(function (resolve, reject) {  3         setTimeout(function () {  4  resolve();  5  }, time);  6  })  7 };  8 
 9 var start = async function () { 10     // 在這裏使用起來就像同步代碼那樣直觀
11     console.log('start'); 12     await sleep(3000); 13     console.log('end'); 14 }; 15 
16 start();

控制檯先輸出start，稍等3秒後，輸出了end。

基本規則

async 表示這是一個async函數，await只能用在這個函數裏面。

await 表示在這裏等待promise返回結果了，再繼續執行。

await 後面跟着的應該是一個promise對象（固然，其餘返回值也不要緊，只是會當即執行，不過那樣就沒有意義了…）

得到返回值

await等待的雖然是promise對象，但沒必要寫.then(..)，直接能夠獲得返回值。

 1 var sleep = function (time) {  2     return new Promise(function (resolve, reject) {  3         setTimeout(function () {  4             // 返回 ‘ok’
 5             resolve('ok');  6  }, time);  7  })  8 };  9 
10 var start = async function () { 11     let result = await sleep(3000); 12     console.log(result); // 收到 ‘ok’
13 };

捕捉錯誤

既然.then(..)不用寫了，那麼.catch(..)也不用寫，能夠直接用標準的try catch語法捕捉錯誤。

 1 var sleep = function (time) {  2     return new Promise(function (resolve, reject) {  3         setTimeout(function () {  4             // 模擬出錯了，返回 ‘error’
 5             reject('error');  6  }, time);  7  })  8 };  9 
10 var start = async function () { 11     try { 12         console.log('start'); 13         await sleep(3000); // 這裏獲得了一個返回錯誤
14         
15         // 因此如下代碼不會被執行了
16         console.log('end'); 17     } catch (err) { 18         console.log(err); // 這裏捕捉到錯誤 `error`
19  } 20 };

循環多個await

await看起來就像是同步代碼，因此能夠理所固然的寫在for循環裏，沒必要擔憂以往須要閉包才能解決的問題。

1 ..省略以上代碼
2 
3 var start = async function () {
4     for (var i = 1; i <= 10; i++) {
5         console.log(`當前是第${i}次等待..`);
6         await sleep(1000);
7     }
8 };

值得注意的是，await必須在async函數的上下文中的。

 1 ..省略以上代碼  2 
 3 let 一到十 = [1,2,3,4,5,6,7,8,9,10];  4 
 5 // 錯誤示範
 6 一到十.forEach(function (v) {  7  console.log(`當前是第${v}次等待..`);  8     await sleep(1000); // 錯誤!! await只能在async函數中運行
 9 }); 10 
11 // 正確示範
12 for(var v of 一到十) { 13  console.log(`當前是第${v}次等待..`); 14     await sleep(1000); // 正確, for循環的上下文還在async函數中
15 }

第二個例子

這個例子是一個小應用，根據電影文件名，自動下載對應的海報。

 

直接貼出代碼，就不說明了。

 1 import fs from 'fs';  2 import path from 'path';  3 import request from 'request';  4 
 5 var movieDir = __dirname + '/movies',  6     exts     = ['.mkv', '.avi', '.mp4', '.rm', '.rmvb', '.wmv'];  7 
 8 // 讀取文件列表
 9 var readFiles = function () { 10     return new Promise(function (resolve, reject) { 11         fs.readdir(movieDir, function (err, files) { 12             resolve(files.filter((v) => exts.includes(path.parse(v).ext))); 13  }); 14  }); 15 }; 16 
17 // 獲取海報
18 var getPoster = function (movieName) { 19     let url = `https://api.douban.com/v2/movie/search?q=${encodeURI(movieName)}`;
20 
21     return new Promise(function (resolve, reject) { 22         request({url: url, json: true}, function (error, response, body) { 23             if (error) return reject(error); 24 
25             resolve(body.subjects[0].images.large); 26  }) 27  }); 28 }; 29 
30 // 保存海報
31 var savePoster = function (movieName, url) { 32     request.get(url).pipe(fs.createWriteStream(path.join(movieDir, movieName + '.jpg'))); 33 }; 34 
35 
36 (async () => { 37     let files = await readFiles(); 38 
39     // await只能使用在原生語法
40     for (var file of files) { 41         let name = path.parse(file).name; 42 
43  console.log(`正在獲取【${name}】的海報`); 44  savePoster(name, await getPoster(name)); 45  } 46 
47     console.log('=== 獲取海報完成 ==='); 48 })();

其餘信息

微軟的Edge瀏覽器已經率先支持了async/await語法，相信不久以後chrome等瀏覽器、node.js也會跟進的，超期待！~(≧▽≦)/~

一些資料和工具

文中講到的例子的源代碼 https://github.com/think2011/ES7-Async-Await-Demo
方便的在線babel運行環境 https://babeljs.io/repl/
很詳細的異步編程教程 http://es6.ruanyifeng.com/#docs/async
很詳細的promise小書 http://liubin.github.io/promises-book/#introduction