Vue.js/Nuxt.jsでHTTP非同期通信axios/asyncDataを使ってみる

★axiosは非同期処理オブジェクトPromiseベースのHTTPクライアントで簡単にHTTPアクセスできるよ。
★asyncDataメソッド
・ページコンポーネントがロードされるたびに呼ばれる。
・data()の前に非同期処理でdataとマージされるのでここでセットされるデータはdata()で初期設定とかしなくてもエラーにならない。

インストール

サーバ側サンプル

GETメソッドでidが来たら都道府県名をjsonで返すよ!

http://vue.localhost/pref.php

page作成

上記サンプルページにアクセスして都道府県名を取得して表示するよ。

page/pref.vue

http://localhost:3000/pref/?id=1

3種類のasyncDataメソッドの使い方

【Promiseを返す】
※上記の方法

【async/awaitを使う】

【コールバックを定義する】

asyncDataメソッドの引数

asyncDataメソッドの引数はコンテキストだよ。

今回はQueryStringが欲しかったから
query:route.queryのエリアス
を設定したけど他に使うとしたら・・・

params:route.paramsのエリアス(動的ルーティング時のURLのpathとか?
error:エラー処理(後述)
store:Vuexのストアオブジェクト
app:ルートVueインスタンス(全部入り?

参照:https://ja.nuxtjs.org/api/context

カンマ区切りで複数設定できるみたいね。

※いろんなサイトで使い方の例を見てみたけどほとんど「params」だったので当然取得できません。
QueryStringの値ってどうやってとるのよ?コンテキストってなんなのよ~?
ってだいぶ悩んだのはヒミツw

※そういえば、動的ルーティングのところで
this.$route.params.id
って魔法の言葉「params」が出てきてたね!

【動的ルーティングの場合】

pages/pref/_id.vue

queryをparamsに変えるだけでOK!

http://localhost:3000/pref/[id]

エラー処理

【Promiseを返す場合】

【async/awaitを使う場合】

【コールバックを定義する場合】

※やり方は【Promiseを返す場合】と同じだけど引数にerrorは要らないのね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする