20170702-異步編程之 async await

StonePanda 發(fā)布于2019-08-20 17:41 / 1927人閱讀

摘要：是異步編程的另一種解決方案函數(shù)是對函數(shù)的改進的基本用法函數(shù)函數(shù)返回一個實例，可以使用方法為返回的實例添加回調(diào)函數(shù)。函數(shù)內(nèi)部語句返回的值，會成為方法回調(diào)函數(shù)的參數(shù)。也就是說，只有函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行方法指定的回調(diào)函數(shù)。

async await

async await是異步編程的另一種解決方案

async函數(shù)是對Generator函數(shù)的改進

async的基本用法 async函數(shù)

async函數(shù)返回一個 Promise 實例，可以使用then方法(為返回的Promise實例)添加回調(diào)函數(shù)。當函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

例 1：

上面代碼是一個獲取股票報價的函數(shù)，函數(shù)前面的async關(guān)鍵字，表明該函數(shù)內(nèi)部有異步操作。調(diào)用該函數(shù)時，會立即返回一個Promise實例。

async函數(shù)內(nèi)部return語句返回的值，會成為then方法回調(diào)函數(shù)的參數(shù)。

Promise對象的狀態(tài)變化

async函數(shù)返回的 Promise對象，必須等到內(nèi)部所有await命令后面的 Promise 對象執(zhí)行完，才會發(fā)生狀態(tài)改變，除非遇到return語句或者拋出錯誤。也就是說，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行then方法指定的回調(diào)函數(shù)。

await命令的基本用法

正常情況下，await命令后面是一個Promise實例，如果不是，會被轉(zhuǎn)成一個立即resolve的Promise實例。

async function f() {
  return await 123;
}

f().then(v => console.log(v))

等價于

async function f() {
    return await new Promise(function(resolve){
        resolve(123)
    })
}
f().then(v => console.log(v))

等價于

async function f() {
    return await Promise.resolve("123")
}
f().then(v => console.log(v))

await語句的返回值是await命令后面Promise實例的結(jié)果(異步處理的結(jié)果)

function getResult() {
  return new Promise((resolve) => {
    resolve("result: 1000")  // resolve()方法的參數(shù)就是異步處理的結(jié)果
  });
}

async function asyncPrint() {
  const result = await getResult()  // 將異步處理的結(jié)果賦值給result
  return result
}

asyncPrint().then( (result) => { console.log(result) } ) //"result: 1000"

異常處理

如果await后面的異步操作出錯，那么等同于async函數(shù)返回的 Promise 對象被reject。

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error("出錯了");
  });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出錯了

防止出錯的方法，也是將其放在try...catch代碼塊之中。

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error("出錯了");
    });
  } catch(e) {
  }
  return await("hello world");
}

使用注意

如果await后面的異步操作出錯，那么等同于async函數(shù)返回的 Promise 對象被reject,所以最好把await命令放在try...catch代碼塊中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一種寫法

async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

多個await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時觸發(fā)。

let foo = await getFoo();
let bar = await getBar();

上面代碼中，getFoo和getBar是兩個獨立的異步操作（即互不依賴），被寫成繼發(fā)關(guān)系(只有執(zhí)行完getFoo操作，才能去執(zhí)行g(shù)etBar操作)。這樣比較耗時，因為只有getFoo完成以后，才會執(zhí)行getBar，完全可以讓它們同時觸發(fā)。

解釋：這里的getFoo和getBar方法會返回兩個Promise實例(假設(shè)是發(fā)起Ajax請求，請求foo和bar的內(nèi)容)，只有執(zhí)行了方法，對應(yīng)的操作才會執(zhí)行，如果寫成上面的形式，就會導(dǎo)致執(zhí)行完getFoo的操作后(等待收到服務(wù)器的響應(yīng)后)，才能執(zhí)行getBar的操作，這樣就成了同步，比較耗時，因此可以將上面的寫法修改，使得在等待getFoo執(zhí)行完的時間內(nèi)(在等待服務(wù)器響應(yīng)的期間)去執(zhí)行執(zhí)行getBar

記住：當函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

上面兩種寫法，getFoo和getBar都是同時觸發(fā)，這樣就會縮短程序的執(zhí)行時間。

參考資料

ECMAScript 6 入門