Async +Await

async 是“異步”的簡寫,async 用于申明一個 function 是異步的,而 await 用于等待一個異步方法執(zhí)行完成,await 只能出現(xiàn)在 async 函數(shù)中

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 函數(shù)的星號(*)替換成 async,將 yield 替換成await

但async 函數(shù)對 Generator 函數(shù)做了改進:
1、內(nèi)置執(zhí)行器:Generator函數(shù)的執(zhí)行必須靠執(zhí)行器,所以才有了 co 函數(shù)庫,而 async 函數(shù)自帶執(zhí)行器.也就是說,async 函數(shù)的執(zhí)行,與普通函數(shù)一模一樣。
2、更好的語義:async 和 await,比起星號和 yield,語義更清楚了。async 表示函數(shù)里有異步操作,await 表示緊跟在后面的表達式需要等待結果。
3、更廣的適用性: co 函數(shù)庫約定,yield 命令后面只能是 Thunk 函數(shù)或 Promise 對象,而 async 函數(shù)的 await 命令后面,可以跟 Promise 對象和原始類型的值(數(shù)值、字符串和布爾值,但這時等同于同步操作)

async 的作用

async 函數(shù)負責返回一個 Promise 對象
如果在async函數(shù)中 return 一個直接量,async 會把這個直接量通過Promise.resolve() 封裝成 Promise 對象;
如果 async 函數(shù)沒有返回值,它會返回 Promise.resolve(undefined)

await 在等待什么

一般我們都用await去等帶一個async函數(shù)完成,不過按語法說明 await 等待的是一個表達式,這個表達式的計算結果是 Promise 對象 或者其它值,所以,await后面實際可以接收普通函數(shù)調(diào)用或者直接用

如果await等到的不是一個promise對象,那跟著的表達式的運算結果就是它等到的東西;
如果是一個promise對象,await會阻塞后面的代碼,等promise對象resolve,得到resolve的值作為await表達式的運算結果
雖然await阻塞了,但await在async中,async不會阻塞,它內(nèi)部所有的阻塞都被封裝在一個promise對象中異步執(zhí)行

Async Await使用場景

如上面的例子,當需要用到promise鏈式調(diào)用的時候,就體現(xiàn)出Async Await的優(yōu)勢;

假設一個業(yè)務需要分步完成,每個步驟都是異步的,而且依賴上一步的執(zhí)行結果,甚至依賴之前每一步的結果,就可以使用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來實現(xiàn)

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();

下面的例子,指定多少毫秒后輸出一個值。

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回調(diào)

await read('1.txt','utf8').catch(function(err){
    console.log(err);
})

await 只能出現(xiàn)在 async 函數(shù)中,如果用在普通函數(shù),就會報錯

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  // 報錯
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}

上面代碼會報錯,因為 await 用在普通函數(shù)之中了。但是,如果將 forEach 方法的參數(shù)改成 async 函數(shù),也有問題

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  // 可能得到錯誤結果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}

上面代碼可能不會正常工作,原因是這時三個 db.post 操作將是并發(fā)執(zhí)行,也就是同時執(zhí)行,而不是繼發(fā)執(zhí)行。正確的寫法是采用 for 循環(huán)。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  for (let doc of docs) {
    await db.post(doc);
  }
}

如果確實希望多個請求并發(fā)執(zhí)行,可以使用 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 的優(yōu)點:
1、解決了回調(diào)地獄的問題
2、支持并發(fā)執(zhí)行
3、可以添加返回值 return xxx;
4、可以在代碼中添加try/catch捕獲錯誤

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容