一.為什麼要使用async 和 await

作用：用於解決回撥函式巢狀問題，使程式碼可讀性更高，解決回撥地獄問題。（巢狀的例子就不舉了，一抓一堆）

二.async 和 await 使用說明？

1. async用於修飾一個函式, 表示一個函式是非同步的
2. await必須寫在 async函式中, 一般後面跟的 promise物件, 會等待 promise成功的結果
3. 作用：await會阻塞 async函式的執行, 讓程式碼可讀性更高
4. await只會等待成功的結果, 失敗了會報錯, 報錯需要通過 .catch() 方法處理

注意：async 和 await是一對關鍵字，必須要成對使用才有效果。

三.async 詳解

示例1：
timeout函式不加 async

function timeout() {
  return 'hello world'
}

async function aa () {
  console.log(timeout())
  console.log('我在後面')
}
aa()

輸出：

示例2：
給 timeout函式加上 async

async function timeout() {
  return 'hello world'
}
async function aa () {
  console.log(timeout())
  timeout().then( data =>
 
 {
    console.log('執行.then()方法後:',data)
  })
  console.log('我在後面')
}
aa()

輸出：

總結： async函式會返回 Promise 物件，而不是“ hello world ” ；所以要想返回“ hello world ”執行.then()方法即可。所以，返回了Promise物件就可以使用await了，await後面一般跟Promise物件。

備註：這裡的Promise是async函式內部的實現原理。如果async函式中有返回一個值 ,當呼叫該函式時，內部會呼叫Promise.resolve()方法把它轉化成一個promise

問題：那麼現在問題來了，有沒有 發現，由於timeout()是非同步執行的，所以控制檯列印的順序跟我們程式碼裡面寫的順序不一樣。所以這個時候要用 async和await來解決這個問題。

四.await 說明

首先await要寫在async函式裡面，跟async一起使用；
await會阻塞async函式的執行，後面跟Promise物件，等待Promise物件執行成功，返回一個成功的結果，才會執行下面的程式碼。

五.async 和 await 具體使用

例子1

async function timeout() {
  return 'hello world'
}

async function aa () {
  try {
    console.log(timeout())
    // 方法1
    await timeout().then( data => {
      console.log('執行.then()方法的結果:',data)
    })
    // 方法2
    let data = await timeout().then()
    console.log('等待的成功的結果:',data)
    console.log('我在後面')
  } catch (e) {
    console.log(e)
  }
}
aa()

輸出：

當我們在timeout()前面加上await來阻塞函式的執行時，列印順序的問題就解決了。

注意：實際使用
1、timeout()方法只是自己造的，實際工作await後面可以放一個非同步的ajax請求，返回後臺請求成功的資料。

附加：try catch 配合。 要監視的程式碼寫在try裡面，監視的程式碼執行錯誤會調catch方法。

例子2

function aa(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 3000);
    } )
}

// 多個非同步方法
async function test() {
    let first = await aa(30);
    let second = await aa(50);
    let third = await aa(30);
    console.log(first + second + third);
}

test()

輸出：

9秒後輸出220，毫無巢狀，優勢很明顯