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

Question

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

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

ストア

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

plugin/axios.js

import Vue from 'vue'
import axios from 'axios'

export default ({ app }, inject) => {
  inject('api', (request, endpoint) => {
    const session_token = ''
    const api = axios.create({
      headers: { 'X_SESSION_TOKEN': session_token },
      baseURL: 'http://localhost:3000/api/'
    })

    api({
      methods: request,
      url: endpoint
    }).then(response => {
      response // APIからの値は正常に返ってくる
    })
  })
}

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

Comments

[rubytomato]

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

pluginではなく、nuxt.config.jsでaxiosのオプションを指定してした場合の結果を教えてください。

[mihodesu]

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

Answer 1

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