理解ES7中的async函數

什麼是Async、await

ES2017 標準引入了 async 函數，使得異步操做變得更加方便。async顧名思義是「異步」的意思，用於聲明一個函數是異步的。而await從字面意思上是「等待」的意思，就是用於等待異步完成。

基本用法

async函數的返回值

既然async函數是聲明一個異步函數，那麼咱們如何知道這個函數是否執行完成呢。咱們觀察一下async函數的返回值就明白了。

async function lxcAsync() {
    return "LXC";
}

console.log(lxcAsync()); // Promise { 'LXC' }

代碼輸出的結果是Promise { 'LXC' }，可見async函數返回的是一個Promise對象，所以咱們能夠使用then方法添加回調函數，從而處理async函數返回的結果。

async function lxcAsync() {
    return "LXC";
}

lxcAsync().then((data) => {
    console.log(data);   // LXC
});

await的做用

正常狀況下，await命令後面是一個 Promise 對象。固然也能夠是原始類型和非Promise對象，但會被轉成一個當即resolve的 Promise 對象，這是等同於同步操做。await表示函數等待promise返回結果了，再繼續執行。

function delay() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('LXC');
        }, 2000);
    })
}

async function lxcAsync() {
    let de = await delay();
    console.log(de); //  2s後輸出LXC
}
lxcAsync();

注意點

await關鍵字只能用於async函數執行上下文中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

上面即是一種錯誤用法，await並無在lxcAsync函數執行上下文中，而是在setTimeout的回調函數中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

若是咱們但願在某個異步函數的回調函數中使用await（若是使用過jest，應該會知道jest的異步測試就有這種需求）,咱們能夠使用下列方式

function lxcAsync() {
   setTimeout(async () => {
     await 1;
   },1000)
}
lxcAsync();

reject錯誤處理

若是await後面的Promise對象返回的是reject，那麼咱們須要如何處理呢？這時咱們須要try-catch來處理。

function delay() {
    return new Promise((resolve, reject) => {
        reject('LXC');
    })
}

async function lxcAsync() {
    try {
        let de = await delay();
        console.log(de); 
    } catch (error) {
        console.log(error);  //輸出LXC
    }

}
lxcAsync();