【ログイン機能】nuxtjs/axios

2 min read

laravel apiとnuxtの連携でaxiosを使用したのでメモ
nuxtjs/axiosはnuxtのライブラリ

axiosとは

HTTP通信を簡単に行うことができるJavascriptライブラリ(サーバー間と通信するときには必須の技術)
ブラウザやnode.js上で動くPromiseベースのHTTPクライアント
非同期にHTTP通信を行いたいときに容易に実装できる
Vue.jsやnuxtjsでは非同期通信を行うのにaxiosを使うのがスタンダード
fetchとかそういう系の機能

セットアップ

  • axiosのインストール方法
  • axios.jsにログを仕込む
  • nuxt.comfig.jsの設定
  • axiosの使ってAPIを叩く

axiosのインストール

npm install @nuxtjs/axios

axios.jsにログを仕込む

$ touch plugins/axios.js

axios.js

  • onRequest … リクエスト時に行いたい処理を記述します。
  • onResponse … レスポンス時に行いたい処理を記述します。
  • onError … エラー時に行いたい処理を記述します。
export default ({ $axios }) => {
 // リクエストログ
 $axios.onRequest((config) => {
   console.log(config)
 })
 // レスポンスログ
 $axios.onResponse((config) => {
   console.log(config)
 })
 // エラーログ
 $axios.onError((e) => {
   console.log(e.response)
 })
}

https://axios.nuxtjs.org/extend

nuxt.comfig.jsの設定

nuxt.config.js

  modules: [
    '@nuxtjs/axios', //追記
    '@nuxtjs/auth-next',
    '@nuxtjs/proxy',
  ],

//すべてのリクエストに適用されるグローバルオプションを構成
  axios: { //axiosオブジェクトをに追加
    baseURL: 'URL', //追記
  },

  • baseURL … サーバ側からのリクエストに使うAPI URLを指定
    • baseURLのデフォルト値はhttp://localhost:3000
  • browserBaseURL … クライアト側からのリクエストに使うAPI URLを指定

※環境変数API_URLが存在する場合、baseURLは上書きされる
→API_URLという名前の環境変数を設定すれば、baseURLすら記述しなくても問題ない

# 環境変数(laravel .env)
API_URL=http://localhost:3000

# nuxt.config.js
axios: {
  baseURL: 'http://localhost:8080'
}

# 結果
axios.defaults.baseURL => http://localhost:3000

https://axios.nuxtjs.org/setup
https://axios.nuxtjs.org/options/
https://blog.cloud-acct.com/posts/u-nuxtjs-axios/

axiosの使ってAPIを叩く

<script>
import Header from "@/components/header.vue";
import axios from 'axios'

export default {
  components: {
    Header,
  },
  data() {
    return {
      message: '',
    }
  },
  mounted () {
  axios.get('http://localhost:8000/api/test')
    .then((res) => {
      console.log(res.data)
      this.message = res.data
    })
    .catch((error) => {
      console.log(error)
    })
  }
};
</script>

Usage

https://axios.nuxtjs.org/usage

asyncDataが何故か使えん。。

参考

https://axios.nuxtjs.org/

https://from-age35.com/1985.html#index_id1

https://ma-vericks.com/nuxt-axios/