質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1712閲覧

Nuxt axiosをプラグインで使いたい

mihodesu

総合スコア16

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/29 09:13

axiosのheaderbaseURLを固定させるために、pluginを利用しています。

値の受け取りは問題ないのですが、asyncawaitをストア内に記述してもAPIからのレスポンスが返ってくる前に、
後の処理が実行されてしまい、どのようにpluginで設定すればいいか悩んでいます。

ストア

javascript

1export const actions = { 2 async getProductList (context, payload) { 3 cinst res = await this.$api('get', 'product/index') 4 console.log('GET結果') 5 console.log(res) // APIから値が返る前に実行され、undefindになる 6 }, 7}

plugin/axios.js

javascript

1import Vue from 'vue' 2import axios from 'axios' 3 4export default ({ app }, inject) => { 5 inject('api', (request, endpoint) => { 6 const session_token = '' 7 const api = axios.create({ 8 headers: { 'X_SESSION_TOKEN': session_token }, 9 baseURL: 'http://localhost:3000/api/' 10 }) 11 12 api({ 13 methods: request, 14 url: endpoint 15 }).then(response => { 16 response // APIからの値は正常に返ってくる 17 }) 18 }) 19}

plugin内にawaitを記述すれば、解決すると思ったのですがpluginでの書き方がいまいちわかりません。ご教授いただけると助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rubytomato

2019/12/29 10:36

> axiosのheaderやbaseURLを固定させるために、pluginを利用しています。 pluginではなく、nuxt.config.jsでaxiosのオプションを指定してした場合の結果を教えてください。
mihodesu

2019/12/29 16:00

確かにaxiosのcreateの中身をnuxt.config.jsに書けば、無理にpluginを作る必要はないですね おかげ様でうまくいきました。ありがとうございました。
guest

回答1

0

自己解決

pluginではなく、nuxt.conf.jsにaziosの設定を書くことでうまくできました。

投稿2019/12/29 16:01

mihodesu

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問