Async +Await

接着上一篇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 函數作了改進：

一、內置執行器：Generator函數的執行必須靠執行器，因此纔有了 co 函數庫，而 async 函數自帶執行器.也就是說，async 函數的執行，與普通函數如出一轍。

二、更好的語義：async 和 await，比起星號和 yield，語義更清楚了。async 表示函數裏有異步操做，await 表示緊跟在後面的表達式須要等待結果。

三、更廣的適用性： 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 的優勢： 一、解決了回調地獄的問題
二、支持併發執行
三、能夠添加返回值 return xxx;
四、能夠在代碼中添加try/catch捕獲錯誤

參考資料
一、segmentfault.com/a/119000000…

二、www.ruanyifeng.com/blog/2015/0…