在我的所有Vue组件中全局使用axios

Question

我正在Vue应用程序和CLI中使用axios进行测试。我之前一直在使用vue-resource，通过将它传递给Vue.use (VueResource)，我可以在所有组件中访问它。如何使用axios实现这一点，以便我不必在组件中导入它，而只需在main.js文件中定义它一次?

- FeRcHo

Answer 1

在 main.js 中，您只需将 Axios 分配给 $http。

main.js

import Axios from 'axios'

Vue.prototype.$http = Axios;

通过修改Vue原型，任何Vue实例都能够调用$http方法（例如：this.$http.get('https://httpbin.org/get')）。

注意：$http现在是axios对象，所以你可以在this.$http上调用任何axios对象的方法。

- Brandon Deo

---

如果您不想混乱main.js，可以将语句放入一个lib/axios.js文件中，并添加所有的拦截器，然后导出axios对象，在main.js中进行分配。它们可以放在任何您想要的地方。 - Brandon Deo

@AnuvratParashar 你找到如何在vuex store中访问$http了吗？我也有一个问题，需要在两个地方设置Auth头。谢谢。 - Roark

@Roark 我目前使用axios或其他提供者以不同的方式构建我的ajax请求，我认为这种方式更具可扩展性（适用于vuex）。如果你想问关于它的问题，请在此处留下链接，我很乐意帮助你。 - FeRcHo

你好，这个解决方案已经两年了，还安全吗？因为它覆盖了实际的 $http。 - aswzen

@aswzen 默认情况下，Vue原型上没有设置$http。这是一种常见的范例，用于此类实用程序。据我所知，它仍然被认为是安全的。由于axios提供了更灵活、更强大的解决方案，因此Vue-Resource已被放弃。 - Brandon Deo

Answer 2

注意: 当以包的形式安装Vue模块而不是通过CDN使用时，此方法可行，否则如果从CDN导入Vue，则有两种选择，第一种是使用这里提供的答案，第二种是在main.js中导入Vue，然后使用Vue.prototype.{variable}=Axios。

对于VUE3，您需要添加以下代码:

语法:

app.config.globalProperties.{variable} = value;

例子：

app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get

在您的 main.js 或 app.js 文件中。

/**
 * Importing libraries & componenets
 */
import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import Axios from 'axios';

/**
 * Vue initialization
 */
const app = createApp({
    components: { 
        Index 
    },
});

app.use(router);
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
app.mount('#app');

您可以在组件中调用与VUE2相同的GET方法：this.$http.get('https://httpbin.org/get')

- Mayank Dudakiya

---

非常好用。感谢分享。 - invinciblemuffi

Answer 3

对于那些从零开始实现（不使用已弃用的vue-resource）的人，还有另一种简单高效的方法，即"Laravel方式".

在CLI中运行：npm install axios

在main.js中定义：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Accept'] = 'application/json';

然后您可以在任何组件中像这样使用它：

window.axios.get('https://example.com').then(r => console.log(r.data));

并捕获r.data输出

（如果您使用Laravel路由而不是Vue的路由，则可以像这样使用：axios.get(url).then(...)

- Alessandro

Answer 4

最终对我有用的是这个：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(router)
app.use(VueAxios, axios)
app.mount('#app')

我使用了这个库： vue-axios

- שמעון פוקס