ES2017 標準引入了 async 函式，使得非同步操作變得更加方便。

首先我們要理解async函式的幾個要點：

1. 返回值是Promise

   不管是否return，都會返回一個Promise物件。

   相當於執行：

   return Promise.resolve(value)
   // 如果函式沒有return，則value是undefined
   

2. 使用了await命令，則一定要await後面的程式碼執行完之後才會執行下面的程式碼，不管await後面是一個非同步還是同步函式。

   正是因為這個命令，才讓js的非同步程式碼看起來像同步程式碼一樣，從上至下依次執行。

3. 給await命令賦值，會得到什麼值

   const v = await f()
   

   如果f函式返回的是基礎值，那v就是這個返回值

   如果f函式返回的是Promise物件，那v就是這個Promise物件的resolved或rejected值

清楚了上面的程式碼後，我們開始用程式碼來說話

async function f() {
  return 'res'
}
const v = f()
console.log(v) // Promise {<resolved>: 'res}

async function f() {
  return new Promise((resolve, reject) => resolve
 
('res'))
}
const v = f()
console.log(v) // Promise {<resolved>: 'res}

沒有問題，返回的是Promise物件， 這時我們加await命令，看一下效果：

async function f() {
  return 'res'
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

async function f() {
  return new Promise((resolve, reject) => resolve
 
('res'))
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

也沒有問題，如果是返回值是Promise物件，那麼v值就是這個Promise物件的resolved或reject值

加一點難度

async function f() {
  return new Promise((resolve, reject) => resolve('res')).then(res => {
    console.log(res) // res
  })
}
async function excute () {
  const v = await f()
	console.log(v) // undefined
}

為什麼v是undfined？

鏈式呼叫返回值永遠都是最後一個呼叫的返回值，上面做對的then未return，所以返回的就是undefined

只需在then方法return你要返回的值就行了

async function f() {
  return new Promise((resolve, reject) => resolve('res')).then(res => {
    return res
  })
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

再升級一下難度

async function f() {
  return new Promise((resolve, reject) => resolve('res'))
}
async function excute () {
  const v = await f().then(res => {
    return 'result'
  })
	console.log(v) // result
}

其實和上面是一樣的邏輯，await得到是它後面的所有程式碼執行的結果，而且是得到最終結果後才會執行同一執行環境它下面的js程式碼