async 的用法

async它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，異步函數(shù)意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行
下面是一個(gè)async函數(shù)，直接加括號(hào)調(diào)用就可以了。

    async function test() {
        return 'Hello World';
    }
    console.log(test());

查看控制臺(tái)，函數(shù)返回是一個(gè)promise對(duì)象，我們獲取到了Hello World，同時(shí)沒(méi)有阻塞后面代碼的執(zhí)行。

image

    async function test() {
        return 'Hello World';
    }
    test().then(res => {
        console.log(res); // Hello World
    });
    console.log('先執(zhí)行');

可以注意到，上面控制臺(tái)中的Promise有一個(gè)resolved，這是async函數(shù)內(nèi)部的實(shí)現(xiàn)原理。如果async函數(shù)中有返回一個(gè)值，當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會(huì)調(diào)用Promise.resolve() 方法把它轉(zhuǎn)化成一個(gè)promise對(duì)象作為返回，如果函數(shù)內(nèi)部拋出錯(cuò)誤的時(shí)候，就會(huì)調(diào)用Promise.reject()返回一個(gè)promise對(duì)象。

     async function test(flag) {
         if (flag) {
             return 'Hello World';
         } else {
             throw 'Oh my god';
         }
     }
     console.log(test(true)); // 調(diào)用Promise.resolve() 返回promise對(duì)象。
     console.log(test(false)); // 調(diào)用Promise.reject() 返回promise對(duì)象。

image

如果函數(shù)內(nèi)部拋出錯(cuò)誤， promise 對(duì)象有一個(gè)catch 方法進(jìn)行捕獲。

     test().catch(err => {
         console.log(err);
     });

await 的用法

await意思是async/wait(異步等待)。這個(gè)關(guān)鍵字只能在使用async定義的函數(shù)里面使用。任何async函數(shù)都會(huì)默認(rèn)返回promise，并且這個(gè)promise解析的值都將會(huì)是這個(gè)函數(shù)的返回值，而async函數(shù)必須等到內(nèi)部所有的await命令的Promise對(duì)象執(zhí)行完，才會(huì)發(fā)生狀態(tài)改變。

     function getResult(num) {
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 resolve(num * 10);
             }, 2000);
         } )
     }
 
     async function testResult() {
         let result  = await getResult(2);
         console.log(result);
     }
 
     testResult(); // 2s之后輸出 20

代碼的執(zhí)行過(guò)程：調(diào)用testResult函數(shù)，遇到await之后，代碼就暫停執(zhí)行了，等待getResult(2)執(zhí)行完畢，getResult(2)返回的promise開(kāi)始執(zhí)行，2秒之后，promise resolve了，并返回了值為20，這時(shí)await才拿到返回值20，然后賦值給result，暫停結(jié)束，代碼才開(kāi)始繼續(xù)執(zhí)行，執(zhí)行console.log語(yǔ)句。