无法在 nuxt 中使用 axios 插件

Question

我正在尝试按照此处所述向 Nuxt 添加 Axios 插件，但它似乎不起作用。

这是我的plugins/axios.js文件...

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)
  })
}

这是我的nuxt.config.js

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

这是我在名为services/BookService.js的文件中使用 Axios 的地方：

import axios from 'axios'

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

我从我的插件中得到了console.log('Im in the axios plugin') ，但没有别的。 $axios.onRequest不会出现运行，并且baseURL时不会出现正确设置getBooksFiltered被触发。 当它尝试访问地址http://localhost:3000/Home/Filters时，我得到了404 。 如我的插件中所述，地址应为https://localhost:5001/api/Home/Filters

我也在我的nuxt.config.js尝试了以下nuxt.config.js ，但它不起作用：

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

有任何想法吗？

编辑

我已经根据以下建议修改了我的services/BookService.js ...

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

我的 api 调用的操作请求如下....

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)
    })
}

我的组件中调用操作的方法......

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'
    })
  }
}

我知道我可能错误地将 async/await 与 promise 混合在一起，但我不认为这是导致此问题的原因。

控制台返回以下...

我的网络选项卡包含对http://localhost:3000/的单个请求，这似乎不正确。 根据插件和操作中指定的地址，它应该是https://localhost:5001/api/Home 。 它也永远不会进入$axios.onRequest

Answer 1

axios-module在 Nuxt 应用实例上设置一个 Axios 实例。 当您从axios导入 Axios 并直接使用它时，您没有使用之前设置的 Axios 实例。

要解决此问题，您可以从window.$nuxt.$axios引用预配置的 Axios 实例（仅在浏览器中），或者设置您的服务以将 Axios 实例作为参数：

// 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)
    }
  }
}

---

来自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

用：

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

Answer 2

在我的情况下，我按照 axios.js 中的文档建议导出了一个自定义的 axios 实例

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

然后在你的 getBook 服务中使用 this.$api.get 或 this.$api.post 上面的一个对我有用

Answer 3

似乎您需要像这里的安装说明一样通过yarn add @nuxtjs/axios或npm install @nuxtjs/axios才能工作： https : npm install @nuxtjs/axios

我还没有体验过 nuxt，但我不认为通过将一些代码行添加到某些 js 文件中而不实际安装会使该软件包可用于您的存储库。