JavaScript Async/Await 詳解

Async/Await 是什麼？

Async/Await 是編寫異步程序的新方式，它實際上是基於Promise來實現的，他會讓異步的代碼寫起來和同步代碼一樣

Node也已經在7.6版本開始支持Async/Await

使用方法

學習它是如何使用的，採用了什麼樣神奇的語法糖

在這之前，可以先看一個使用Promise的異步編程：使用axios模塊異步獲取一條數據

function getData(){

    return axios.get('http://data/banner')
         .then(res=>{
            return res;
          })
}

getData()

使用Async/Await是什麼樣呢

axync function getData(){

    let res = await axios.get('http://data/banner')

    return res

}

getData()

第一種寫法採用Promise的寫法，將異步的調用變成了鏈式的寫法，讓複雜的回調更加的清晰。

第二種Async/Await寫法呢：

• 函數前增加關鍵字async,在函數體內使用await關鍵字，await當讓也只能聲明在函數體內，該函數會隱式的返回一個Promise對象，函數體內的return值，將會作爲這個Promise對象 resolve 時的參數
• await axios.get()會讓函數等到axios.get()返回的Promise對象resolve之後觸發

使用Async/Await的優勢有哪些

• 讓代碼更加的簡約

我們上面寫的代碼，不用寫then，不需要創建一個匿名函數來處理返回值，或者也不需要把一個數據賦給一個我們不需要的值。還避免了代碼的嵌套。

• 更容易處理錯誤

Async/Await 最終讓以同樣的方式處理同步和異步的錯誤成爲了可能，讓try/catch更好的使用。

下面舉個例子，使用Promise，來處理異步編程的錯誤捕獲， 由於程序是異步的最外面一層  try/catch。他無法捕獲Promise內部發生的錯誤，我們只能嵌套一層try/catch來解決:

function getData(){
    try{
        axios.get('http://data/banner')
            .then(res=>{
                try{
                    let json = JSON.parse(res)
                 }
                 catch(err){
                    console.log(err)
                 }
                 return json 
              })
      }
       catch(err){
            console.log(err)
        }
}  

要是使用Async/Await的異步編程是如何處理錯誤的：

async function getData(){
    let data;
    try{
        data = JSON.parse(await axios.get('http://data/banner'));
    }
    catch(err){
        console.log(err);
    }
    return data;
}

• 更容易處理條件判別

應用場景：先獲取數據，然後通過已獲得的數據來判斷是否繼續獲取更多的詳細數據

function getData(){
    return axios.get('http://data/banner').then(res=>{
        if(res&&res.data&&res.data.id){
            return axios.get('http://data/banner').then(res=>{
                return res;
            })
        }
        else{
            return res
        }
    })
}

這種寫法嵌套過多，會導致很多變量的遺失，讓邏輯難以處理

Async/Await編程如何處理：

async function getData(){
    let data = await axios.get('http://data/banner')
    if(data.id){
        let dataDep = await axios.get('http://data/banner')
        return datadep
    }
    else{
        return data;
    }
}

• 更容易處理中間值

場景：調用promise1,然後將它返回給promise2，最後又將兩個promise的結果都返回給promise3

function getData(){
    return promise1()
        .then(value1=>{
            return promise2(value1)
                .then(value2=>{
                    return promise3(value1,value2)
                })
         })
}

使用Async/Await編寫：

async function getData(){
    const value1 = await promise1()
    const value2 = await promise2(value1)
    const value3 = await promise3(value1,value2)
}

使用Async/Await也會大大方便我們的斷點調試