田無rb#4

「Vue.js&Nuxt.js超入門」写経続き

Chapter6外部サービスを利用しようの続きから 前回は axios を使って自前で用意しているデータを読み込んだので外部データの読み込みを行う JSONのダミーデータを公開しているJSONPlaceholderと言うサービスを使う

  • axiosではgetで受け取ったデータがJSON形式だった場合、自動的にオブジェクトに変換してくれる
  • asyncDataはコンポーネント生成時、自動的に実行される
    • 自動的ではなく、自分で非同期通信をしたいときは自前実装の必要あり(以下のような形で書く)
      • ボタンクリックで実行など。非同期処理なので、値を使ってなにか行いたいときは注意
axios.get(アドレス).then((res) => { ...アクセス後の処理... })
  • エラー対策
    • アドレスが間違えていたり、サーバが停止したりなど様々な原因
    • thenの後にメソッドチェーンを使ってcatchを記述(引数は関数となる。その関数の引数にエラー情報をまとめたオブジェクトが渡される)
axios.get(アドレス).then(...).catch((error) => { ...エラー処理... });