本篇文章主要介紹了Javascript中的async/awai的用法，將分享async / await是如何運作的，有興趣的可以了解一下
async / await是ES7的重要特性之一，也是目前社區裡公認的優秀非同步解決方案。目前，async / await這個特性已經是stage 3的建議，可以看看TC39的進度，這篇文章將分享async / await是如何運作的，閱讀本文前，希望你具備Promise、generator、yield等ES6的相關知識。
在詳細介紹async / await之前，先回顧下目前在ES6中比較好的非同步處理辦法。以下的範例中資料請求以Node.js中的request模組，資料介面採用Github v3 api文件提供的repo程式碼倉庫詳情API作為範例示範。
Promise對非同步的處理
雖然Node.js的非同步IO帶來了對高並發的良好支持，同時也讓「回呼」成為災難，很容易造成回調地獄。傳統的方式例如使用具名函數，雖然可以減少巢狀的層數，讓程式碼看起來比較清晰。但是會造成比較差的編碼和調試體驗，你需要經常使用用ctrl + f去尋找某個具名函數的定義，這使得IDE視窗經常上下來回跳動。使用Promise之後，可以很好的減少嵌套的層數。另外Promise的實作採用了狀態機，在函數裡面可以很好的透過resolve和reject進行流程控制，你可以依照順序鍊式的去執行一系列程式碼邏輯了。以下是使用Promise的一個例子：
const request = require('request');
// 请求的url和header
const options = {
url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
headers: {
'User-Agent': 'request'
}
};
// 获取仓库信息
const getRepoData = () => {
return new Promise((resolve, reject) => {
request(options, (err, res, body) => {
if (err) {
reject(err);
}
resolve(body);
});
});
};
getRepoData()
.then((result) => console.log(result);)
.catch((reason) => console.error(reason););
// 此处如果是多个Promise顺序执行的话，如下：
// 每个then里面去执行下一个promise
// getRepoData()
// .then((value2) => {return promise2})
// .then((value3) => {return promise3})
// .then((x) => console.log(x))不過Promise仍然有缺陷，它只是減少了嵌套，並不能完全消除嵌套。舉個例子，對於多個promise串列執行的情況，第一個promise的邏輯執行完之後，我們需要在它的then函數裡面去執行第二個promise，這個時候會產生一層巢狀。另外，採用Promise的程式碼看起來依然是異步的，如果寫的程式碼如果能夠變成同步該有多好！
Generator對非同步的處理
談到generator，你應該不會對它感到陌生。在Node.js中對於回呼的處理，我們常用的TJ / Co就是使用generator結合promise來實現的，co是coroutine的簡稱，藉鑑於python、#lua等語言中的協程。它可以將非同步的程式碼邏輯寫成同步的方式，這使得程式碼的閱讀和組織變得更加清晰，也便於偵錯。
const co = require('co');
const request = require('request');
const options = {
url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
headers: {
'User-Agent': 'request'
}
};
// yield后面是一个生成器 generator
const getRepoData = function* () {
return new Promise((resolve, reject) => {
request(options, (err, res, body) => {
if (err) {
reject(err);
}
resolve(body);
});
});
};
co(function* () {
const result = yield getRepoData;
// ... 如果有多个异步流程，可以放在这里，比如
// const r1 = yield getR1;
// const r2 = yield getR2;
// const r3 = yield getR3;
// 每个yield相当于暂停，执行yield之后会等待它后面的generator返回值之后再执行后面其它的yield逻辑。
return result;
}).then(function (value) {
console.log(value);
}, function (err) {
console.error(err.stack);
});async / await對非同步的處理
雖然co是社群裡面的優秀非同步解決方案，但並不是語言標準，只是一個過渡方案。 ES7語言層面提供async / await去解決語言層面的難題。目前async / await 在 IE edge已經可以直接使用了，但chrome和Node.js還沒有支援。幸運的是，babel已經支援async的transform了，所以我們使用的時候引入babel就行。在開始之前我們需要介紹以下的package，preset-stage-3裡就有我們需要的async/await的編譯檔。
無論是在Browser或Node.js端都需要安裝下面的套件。
$ npm install babel-core --save $ npm install babel-preset-es2015 --save $ npm install babel-preset-stage-3 --save
這裡推薦使用babel官方提供的require hook方法。就是透過require進來後，接下來的檔案進行require的時候都會經過Babel的處理。因為我們知道CommonJs是同步的模組依賴，所以也是可行的方法。這個時候，需要寫兩個文件，一個是啟動的js文件，另一個是真正執行程式的js文件。
啟動檔index.js
require('babel-core/register'); require('./async.js');
真正執行程式的async.js
const request = require('request');
const options = {
url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
headers: {
'User-Agent': 'request'
}
};
const getRepoData = () => {
return new Promise((resolve, reject) => {
request(options, (err, res, body) => {
if (err) {
reject(err);
}
resolve(body);
});
});
};
async function asyncFun() {
try {
const value = await getRepoData();
// ... 和上面的yield类似，如果有多个异步流程，可以放在这里，比如
// const r1 = await getR1();
// const r2 = await getR2();
// const r3 = await getR3();
// 每个await相当于暂停，执行await之后会等待它后面的函数（不是generator）返回值之后再执行后面其它的await逻辑。
return value;
} catch (err) {
console.log(err);
}
}
asyncFun().then(x => console.log(`x: ${x}`)).catch(err => console.error(err));注意點：
async用來申明裡麵包裹的內容可以進行同步的方式執行，await則是進行執行順序控制，每次執行一個await，程式都會暫停等待await回傳值，然後再執行之後的await。
await後面呼叫的函數需要回傳一個promise，另外這個函數是一個普通的函數即可，而不是generator。
await只能用在async函數之中，用在普通函數中會報錯。
await指令後面的 Promise 物件，運行結果可能是 rejected，所以最好把 await 指令放在 try...catch 程式碼區塊中。
其實，async / await的用法和co差不多，await和yield都是表示暫停，外麵包裹一層async 或者co來表示裡面的程式碼可以採用同步的方式進行處理。不過async / await裡面的await後面跟著的函數不需要額外處理，co是需要將它寫成一個generator的。
【相關推薦】
#2. JavaScript運動框架之多值運動的具體介紹（四）
3. JavaScript運動框架之多物體任意值運動的範例程式碼分享（三）
4. JavaScript運動框架如何解決防抖動問題、懸浮對聯（二）
5. JavaScript運動框架之如何解決速度正負取整問題（一）
以上是Javascript中關於async以及awai的用法具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
