批評axiosでJSONを取得する[Vue.js]2019年3月1日JavaScriptHTTPクライアントであるaxiosモジュールを利用して、Vue.jsにおいてJSONデータを取得してみます。JSONのモックデータを提供するサービスであるJSONPlaceholderを利用します。以下リンクで取得できるデータにおいて、userIdが1のデータをGETによって取得してみます。false},...省略まずはCDNを利用した1ファイルによって作成してみます。false)}})</script></body></html>44〜47行目Getメソッドによってデータを取得しています。クエリパラメータとしてuserId=1を渡しています。Postメソッドの場合は「axios.post(〜)」によって実行します(本記事では説明しません)。https://jsonplaceholder.typicode.com/todos?userId=150行目レスポンスデータを取得しています。他にも「response.status」ではステータスコードを、「response.statusText」ではステータステキストを取得できます。49、52行目(then、catch)axiosはPromiseベースであり、thenは処理が正常に実行された場合、catchはネットワークの不具合等により処理が失敗した場合に実行されます。Promiseの非同期処理に関しては下記の関連ページをご覧下さい。3G」などを選択するとエラーや「Loading」の処理が確認しやすくなります。3によって作成したプロジェクトでaxiosを利用してみます。3によるプロジェクト作成は下記の関連ページをご覧下さい。RouterとVuex入門npmでインストールします。axiospackage.jsonファイルのdependenciesの項目を見ると、axiosが設定されているのが確認できます。"^3.0.1"},main.jsにてaxiosを取り込みます。これですべてのコンポーネントにおいて「this.$axios」でaxiosが利用できるようになります。h(App)}).$mount('#app')9行目のprototypeについては下記の関連ページをご覧下さい。prototype(プロトタイプ)についてAbout.vueをまるごと下記のように編集します。none;}</style>※任意のコンポーネントの<script>内にてaxiosをインポートすることも可能です。その場合は「this.$axios」ではなく「axios」となります。以上でAbout画面にて、取得したデータを確認できます。