Axios Module（axios-module）は、axiosをラッパーし様々な機能を追加したNuxt.js専用のモジュールです。
Nuxt.jsのインストールについては下記ページをご覧下さい。
Nuxt.js入門 [$route.params][layouts]
またaxios自体、および本記事で利用するJSONデータについては下記ページもご覧下さい。
インストールします。
|
1 |
npm install --save @nuxtjs/axios |
nuxt.config.js ファイルのmodulesに「@nuxtjs/axios」を追記します。
|
1 2 3 |
modules: [ '@nuxtjs/axios', ], |
「pages」ディレクトリに、ページコンポーネントとしてのsample.vueを作成し、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <ul> <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li> </ul> </div> </template> <script> export default { async asyncData({ $axios }) { const todos = await $axios.$get("https://jsonplaceholder.typicode.com/todos",{ params: { userId: "1" } } ) return { todos }; } }; </script> |
11行目
asyncDataはページコンポーネントがローディングされる前に実行され、サーバーサイドレンダリング（SSR）を実装するためのNuxt.js独自のメソッドです。
次にリクエスト先が404エラーとなった場合に、ページ遷移をさせてみます。
nuxt.config.js ファイルのpluginsに「~/plugins/axios」を追記します。
|
1 2 3 |
plugins: [ '~/plugins/axios' ], |
「plugins」ディレクトリに、axios.jsファイルを作成し、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 |
export default function ({ $axios, redirect }) { $axios.onError(error => { const code = parseInt(error.response && error.response.status) if (code === 404) { redirect('/404') } }) } |
最後に「pages」ディレクトリに、ページコンポーネントとしての404.vueを作成し、下記のように記述します。
|
1 2 3 4 5 |
<template> <div> <h1>404です</h1> </div> </template> |
もしリクエスト先が404エラーとなった場合、下記アドレスに自動的に遷移します。
|
1 |
http://localhost:3000/404 |
CORS (Cross-Origin Resource Sharing) によるブロックに関しては下記ページをご参照下さい。
Nuxt.jsで@nuxtjs/proxyを利用する [CORS][Axios]
参照ページ
