我正在尝试按照 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
似乎没有运行,当 getBooksFiltered
被触发时,baseURL
似乎没有正确设置。当它试图访问地址 http://localhost:3000/Home/Filters
时,我收到了 404
。如我的插件中所述,地址应为 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 与 promises 混合使用,但我认为这不是导致此问题的原因。
控制台返回以下...
我的网络选项卡包含对 http://localhost:3000/
的单个请求,这似乎不正确。根据插件和操作中指定的地址,它应该是 https://localhost:5001/api/Home
。它也从不输入 $axios.onRequest
最佳答案
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
Use:
import apiClient from '~/services/apiClient' export default { async current () { return apiClient.get('...') } }
关于javascript - 无法在 nuxt 中使用 axios 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59241453/