✨
【ログイン機能】nuxtjs/axios
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)
})
}
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
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
asyncDataが何故か使えん。。
参考
Discussion