接著上一篇Generator+co的使用 juejin.im/post/5ab513…
這裡繼續說說js非同步處理的方法 async await( 即Generator的語法糖)
async 是“非同步”的簡寫，async 用於申明一個 function 是非同步的，而 await 用於等待一個非同步方法執行完成，await 只能出現在 async 函式中
同樣用上一篇中讀取檔案的例子,這裡改寫為
let bluebird = require(`bluebird`);
let fs = require(`fs`);
let read = bluebird.promisify(fs.readFile);
//await 命令後面的 Promise 物件，執行結果可能是 //rejected，所以最好把 await 命令放在 try...catch 程式碼塊中。
async function r(){
try{
let content1 = await read(`1.txt`,`utf8`);
let content2 = await read(content1,`utf8`);
return content2;
}catch(e){
console.log(`err`,e)
}
}
r().then(function(data){
console.log(`data`,data);
},function(err){
console.log(`err1`,err);
})
複製程式碼async await和generator的寫法很像，就是將 Generator 函式的星號（*）替換成 async，將 yield 替換成await
但async 函式對 Generator 函式做了改進：
1、內建執行器：Generator函式的執行必須靠執行器，所以才有了 co 函式庫，而 async 函式自帶執行器.也就是說，async 函式的執行，與普通函式一模一樣。
2、更好的語義：async 和 await，比起星號和 yield，語義更清楚了。async 表示函式裡有非同步操作，await 表示緊跟在後面的表示式需要等待結果。
3、更廣的適用性： co 函式庫約定，yield 命令後面只能是 Thunk 函式或 Promise 物件，而 async 函式的 await 命令後面，可以跟 Promise 物件和原始型別的值（數值、字串和布林值，但這時等同於同步操作）
async 函式是非常新的語法功能，新到都不屬於 ES6，而是屬於 ES7。目前，它仍處於提案階段，但是轉碼器 Babel 和 regenerator 都已經支援，轉碼後就能使用。
async 的作用
async 函式負責返回一個 Promise 物件
如果在async函式中 return 一個直接量，async 會把這個直接量通過Promise.resolve() 封裝成 Promise 物件;
如果 async 函式沒有返回值,它會返回 Promise.resolve(undefined)
await 在等待什麼
一般我們都用await去等帶一個async函式完成，不過按語法說明，await 等待的是一個表示式，這個表示式的計算結果是 Promise 物件或者其它值，所以，await後面實際可以接收普通函式呼叫或者直接量
如果await等到的不是一個promise物件，那跟著的表示式的運算結果就是它等到的東西；
如果是一個promise物件，await會阻塞後面的程式碼，等promise物件resolve，得到resolve的值作為await表示式的運算結果
雖然await阻塞了，但await在async中，async不會阻塞，它內部所有的阻塞都被封裝在一個promise物件中非同步執行
Async Await使用場景
如上面的例子，當需要用到promise鏈式呼叫的時候，就體現出Async Await的優勢；
假設一個業務需要分步完成，每個步驟都是非同步的，而且依賴上一步的執行結果，甚至依賴之前每一步的結果，就可以使用Async Await來完成
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(m, n) {
console.log(`step2 with ${m} and ${n}`);
return takeLongTime(m + n);
}
function step3(k, m, n) {
console.log(`step3 with ${k}, ${m} and ${n}`);
return takeLongTime(k + m + n);
}
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
複製程式碼如果用promise來實現
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
複製程式碼可見用promise，引數傳遞非常麻煩
下面的例子，指定多少毫秒後輸出一個值。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value)
}
asyncPrint(`hello world`, 50);
複製程式碼注意
await 命令後面的 Promise 物件，執行結果可能是 rejected，所以最好把 await 命令放在 try…catch 程式碼塊中，或者await後的Promise新增catch回撥
await read(`1.txt`,`utf8`).catch(function(err){
console.log(err);
})
複製程式碼await 只能出現在 async 函式中,如果用在普通函式，就會報錯
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 報錯
docs.forEach(function (doc) {
await db.post(doc);
});
}
複製程式碼上面程式碼會報錯，因為 await 用在普通函式之中了。但是，如果將 forEach 方法的引數改成 async 函式，也有問題
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 可能得到錯誤結果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
複製程式碼上面程式碼可能不會正常工作，原因是這時三個 db.post 操作將是併發執行，也就是同時執行，而不是繼發執行。正確的寫法是採用 for 迴圈。
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
複製程式碼如果確實希望多個請求併發執行，可以使用 Promise.all 方法。
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
// 或者使用下面的寫法
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
複製程式碼總結
使用 async / await, 搭配 promise, 可以通過編寫形似同步的程式碼來處理非同步流程, 提高程式碼的簡潔性和可讀性。
Async Await 的優點：
1、解決了回撥地獄的問題
2、支援併發執行
3、可以新增返回值 return xxx;
4、可以在程式碼中新增try/catch捕獲錯誤