Question

我正尝试按照here所述向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。我尝试访问地址404时收到http://localhost:3000/Home/Filters。如我的插件中所述，地址应为https://localhost:5001/api/Home/Filters

我也在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

似乎您需要像这里的设置说明一样DF %>% group_by(studentID) %>% mutate(count = purrr::map_dbl(row_number(), ~get_counts(questID[1:(.x - 1)])), count = replace(count, 1, 0)) # studentID questID count # <dbl> <dbl> <dbl> #1 1 1 0 #2 1 2 1 #3 1 3 2 #4 1 4 2 #5 2 1 0 #6 2 2 1 #7 2 4 2 #8 3 2 0 #9 3 5 2或yarn add @nuxtjs/axios才能起作用：https://axios.nuxtjs.org/setup

我还没有使用nuxt的经验，但是我认为在不实际安装的情况下将代码行添加到js文件中不会使该软件包可用于您的仓库。

Answer 2

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 3

在我的情况下，我按照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 上面的一个对我有用

无法在nuxt中使用axios插件

3 个答案: