无法在 nuxt 中使用 axios 插件

Question

I'm attempting to add an Axios plugin to Nuxt as described here , but it doesn't seem to work.

This is my plugins/axios.js file...

export default function({ $axios }) {
  console.log('Im in the axios plugin')
  $axios.defaults.baseURL = `https://localhost:5001/api`
  $axios.defaults.headers = {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
  $axios.onRequest((config) => {
    console.log('Making request to ' + config.url)
  })
}

This is my nuxt.config.js

plugins: ['~/plugins/axios'],
modules: ['@nuxtjs/axios']

And this is where I use Axios in a file called services/BookService.js :

import axios from 'axios'

export default {
  getBooks() {
    return axios.get('/Home')
  },
  getBooksFiltered(payload) {
    return axios.post('/Home/Filters', payload)
  }
}

I get the console.log('Im in the axios plugin') from within my plugin, but nothing else. $axios.onRequest doesn't appear to run, and the baseURL doesn't appear to be set correctly when getBooksFiltered is triggered. I get a 404 when it tried to hit the address http://localhost:3000/Home/Filters . As described in my plugin, the address should be https://localhost:5001/api/Home/Filters

I've also tried the following in my nuxt.config.js , but it doesn't work:

axios: {
  baseURL: 'https://localhost:5001/api'
}

Any ideas?

Edit

I've modified my services/BookService.js based on the suggestion below to the following...

export default {
  getBooks(axios) {
    console.log('Im in getBooks')
    return axios.get('/Home')
  }
}

My action request that makes my api call is the following....

import BookService from '~/services/BookService.js'

export const fetchBooks = (context) => {
  console.log('Im in fetchBooks action')
  return BookService.getBooks(this.$axios)
    .then((response) => {
      context.commit('SET_BOOKS', response.data.booksList)
    })
    .catch((error) => {
      console.log(error)
    })
}

And my method in my component that calls the actions...

async fetch({ store, error }) {
  try {
    console.log('Im in index -> fetch')
    await store.dispatch('fetchBooks')
  } catch (e) {
    error({
      statusCode: 503,
      message: 'Unable to fetch books at this time'
    })
  }
}

I'm aware that I may be mixing async/await with promises incorrectly but I don't believe it's the cause of this issue.

Console returns the following...

My network tab contains a single request to http://localhost:3000/ which seems incorrect. It should be https://localhost:5001/api/Home based on the plugin and the address specified in the action. It is also never entering $axios.onRequest

Answer 1

The axios-module sets up an Axios instance on the Nuxt app instance. When you import Axios from axios , and use it directly, you're not using the previously setup Axios instance.

To fix the issue, you could either reference the preconfigured Axios instance from window.$nuxt.$axios (only in the browser), or setup your service to take an Axios instance as a parameter:

// services/BookService.js
export default axios => ({
  getBooks() {
    return axios.get('/Home')
  },
  getBooksFiltered(payload) {
    return axios.post('/Home/Filters', payload)
  }
})

// store.js
import BookService from '~/services/BookService.js'

export default {
  actions: {
    async getBooks({ commit }) {
      const books = await new BookService(this.$axios).getBooks()
      commit('SET_BOOKS', books)
    }
  }
}

---

Another solution from nuxt-community/axios-module #28 :

~/plugins/axios-port.js

 import { setClient } from '~/services/apiClient' export default ({ app, store }) => { setClient(app.$axios) }

~/services/apiClient.js

 let client export function setClient (newclient) { client = newclient } // Request helpers const reqMethods = [ 'request', 'delete', 'get', 'head', 'options', // url, config 'post', 'put', 'patch' // url, data, config ] let service = {} reqMethods.forEach((method) => { service[method] = function () { if (!client) throw new Error('apiClient not installed') return client[method].apply(null, arguments) } }) export default service

Use:

 import apiClient from '~/services/apiClient' export default { async current () { return apiClient.get('...') } }

Answer 2

In my case I exported a customized axios instance as the doc suggested in my axios.js

export default function ({ $axios }, inject) {
    const api = $axios.create({
        baseURL:'/api'
    })
    // Inject to context as $api
    inject('api', api)
  }

Then use this.$api.get or this.$api.post in your getBook service The above one works for me

Answer 3

It seems you need to yarn add @nuxtjs/axios or npm install @nuxtjs/axios like the setup instruction here before it can work: https://axios.nuxtjs.org/setup

I haven't experienced with nuxt yet but I don't think by adding some line of code into some js file without actually installing will make the package available into your repo.