技術標籤：專題學習javascript

async

async是es6中的一個關鍵字，它的作用是能將一個函式變成非同步函式。

其語法為

async function fn(){}

如此，fn函式就成為非同步函式，我們可以用程式碼驗證一下。

 async function fn() {
       return 1;
    }
    console.log(fn());

我們可以看到該函式的返回結果是一個promise物件，我們可以通過then方法獲取其值。如果是普通函式返回的就是1，我們可以直接獲取到值。根據上面的結果，我們也可以認為，async就是將返回的結果包裝成一個peomise物件，不管你return的是啥都會是一個promsie物件，我們可以驗證一下。

async function test() {
        return {
            name: "afuia"
        };
    }
    console.log(test());

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

由此可見不管我們return的是物件還是函式，最後都是promise物件。

 async function fn() {
       return 1;
    }
      fn
 
().then((resove)=>{
       console.log(resolve);
});

這就是非同步函式，我們不能直接獲取到值，而是通過回撥函式獲取到值。由此，我們也可以知曉其使用場景，就是需要進行非同步處理的地方使用async，將一個函式變成非同步函式。此外，它還可以與await搭配使用。

2. await

await是es6中的另一個關鍵字，它的作用是可以把非同步函式變成同步的。

其語法為

async function fn (){
await 非同步函式();
}

根據上述程式碼我們也可以發現，await是在async函式中使用的，這也是await的語法的一部分，await只能在async函式中使用，在普通函式中使用會報錯，我們可以用程式碼驗證一下。

 function fun() {
        return 2;
    }

    function fn() {
        console.log(await fun());
    }
    fn();

  function fun() {
        return 2;
    }

   async function fn() {
        console.log(await fun());
    }
    fn();

如此，await只能在async函式中使用。那麼，如何驗證其將非同步函式變成同步的呢。之前我們瞭解到，同步函式可以直接使用變數接受其返回的值，而非同步函式需要使用回撥函式接受其值，我們可以使用這一區別來驗證。

function test() {
        const val = new Promise((resolve, reject) => {
            resolve("hello");
        });
        console.log(val);
        val.then((resolve) => {
            console.log(resolve);
        });
    }
    test();

val的輸出結果

resolve的輸出結果

async function test() {
        const val = await new Promise((resolve, reject) => {
            resolve("hello");
        });
        console.log(val)
    }
    test();

根據以上兩種結果我們可以看出，同樣的輸出結果，沒有使用await關鍵字時我們需要呼叫then方法獲取其值，而使用了await的那部分程式碼，直接輸出其值，由此，我們驗證了await能把async函式變成同步的這一論斷。

由此，我們也可以知道await的使用場景即我們需要同步執行的地方可以使用await。但是我們也要注意，await將函式變成同步的就意味著程式阻塞，在使用時不要濫用，以免降低使用者體驗。

async和await都是語法糖，他們的實現都離不開promise，從第一個演示返回的是priomise物件就可以看出。

總結

1. async 將一個函式變成非同步函式,不管你在這個函式裡return 的是什麼最後都是promise物件。
2. await 將非同步函式變成同步的，並且只能在async中使用await，否則將會報錯。
3. async和await都是關鍵字，也是語法糖，他們的實現和promise有關。