try...catch : 例外處理

在實作的過程中，當串接 API 後要把回傳的資料進行 JSON 格式的資料轉換之前，會需要思考一個問題 : 這個回傳的資料格式是 JSON 格式嗎? 如果資料是 JSON 格式的話，我們就能針對資料使用 JSON.parse() 的語法將他轉換為 Javascript 物件，但如果他不是呢 ?

如果我們不針對這個情況進行錯誤處理，那程式可能就會在這邊爆掉了。因此這篇文章要整理的是在這個情況會用到的例外處理方法 : try...catch。

try {
    //檢查此區塊裡程式是否有例外產生，若有就丟出例外
}
catch(例外類型) {
    //處理不同例外類型，可有多個catch區塊
}
finally {
    //此區塊可有可無，用來善後工作，無論例外是否產生皆會執行
}

實際範例

try...catch 語法僅能用於同步情況下的例外處理。

但在第一個範例中，雖然我們進行的是非同步的 XMLHttprequest，但因為進行例外處理的是針對回傳資料是否是 JSON 格式，因此還是可以用 try...catch 語法。

這個範例串接氣象資料開放平台的 API :

const BaseURL = opendata.cwb.gov.tw/api
request.addEventListener('load', () => {
  if (request.status >= 200 && request.status < 400) {
    let datas
    try {
      datas = JSON.parse(request.response).records.location
      console.log(datas)
    } catch (err) {
      console.log(err)
    }
  }
request.open('GET', `${BaseURL}/v1/rest/datastore/F-C0032-001`)
request.setRequestHeader('Accept', 'application / json')
request.send()

第二個範例則是使用 asnyc /await

const url = 'https://run.mocky.io/v3/cfb31a54-f4aa-459e-af4d-a3ceabd8710a'

const sleep = ms =>
new Promise(resolve => setTimeout(resolve, ms))

function getData() {
  return fetch(url)
    .then(response => {
      return response.json()
    })
}

async function main() {
      await sleep(1000)
      try {
        const result = await getData()
        console.log(result)
      } catch (err) {
        console.log(err)
      }
    }

main()