Async/Await in React

• Async/Await讓你可以寫出看起來是synchronous但實際上是asynchronous的程式碼
• 每個async function會回傳Promise
• 每個所await的東西將會是Promise
• 這個asynchronous的getUser()回傳一個要花2秒的Promise，這代表我們無法立即取得user物件，而是要等待2秒。

function getUser () {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve({name: 'Tyler'}), 2000)
  })
}

• 為了要處理這樣的delay，可以傳一個function給Promise的`then( )`，這個function會在Promise resolve時(也就是user物件available時)被呼叫

function handleGetUser () {
  getUser()
    .then((user) => {
      console.log('The user is: ', user)
    })
}

• 當Promise chain丟出error時我們可以去catch它

function handleGetUser () {  
  getUser()
    .then((user) => {
      console.log('The user is: ', user)
    })
    .catch((error) => {
      console.warn('Oh no there was an error: ', error)
    })
}

• 然而如果把上面的code改成synchronous的樣式如下，則無法得到我們想要的結果。user變數只會拿到一個Promise，印出的log也就只是這個Promise。

function handleGetUser () {
  var user = getUser()
  console.log(user)
}

• 我們可以做點小修改如下，告訴compiler getUser( )是一個asynchronous的function，那麼他就會暫停執行，一直到resolve完成為止，然後才會印出我們真正要的值

function handleGetUser () {  
  var user = await getUser()
  console.log(user)
}

• 不幸的是，上面的code還是不work，因為你不能沒有用async就用了await，所以請記住，如果我要用await，就要確保我所await的function位於async的function中

async function handleGetUser () {
  var user = await getUser()
  console.log(user)
}

• 至於catch error的部分，直接用JavaScript原本就有的try-catch機制即可

async function handleGetUser () {
  try {
    var user = await getUser()
    console.log(user)
  } catch (error) {
    console.log('Error in handleGetUser', error)
  }
}