在 Vuejs 中全局导入 Axios 方法

Posted 2023-02-22

【中文标题】在 Vuejs 中全局导入 Axios 方法

【英文标题】：Import Axios Method Globally in Vuejs

【发布时间】：2018-10-26 12:16:37

【问题描述】：

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

import axios from 'axios'

let api = axios.create(
  baseURL: 'http://localhost:8000/api/v1/'
)

export default api

当我想在每个组件中使用 axios 时，我必须写这行：

import api from '~/plugins/axios

我怎样才能全局配置它，只写 $api 代替？

【问题讨论】：

为此使用 vuex。访问vuex.vuejs.org/en/intro.html

【参考方案1】：

在 Vue 3 中将其保存在 main.js 中对我来说非常好。

import  createApp  from 'vue';
import App from './App.vue';
import axios from "axios";

const app = createApp(App);

const instance = axios.create(
    baseURL: 'https://example.com/',
  );

app.config.globalProperties.axios=instance

app.mount('#app');

并在任何组件中使用它，

this.axios.post('/helloworld', 
    name: this.name,
    age: this.age
)

【参考方案2】：

您可以创建一个插件并在您的 main.js 文件中像这样使用它（如果您使用的是 vue-cli 之类的东西）

import axios from 'axios'

Vue.use(
    install (Vue) 
    Vue.prototype.$api = axios.create(
      baseURL: 'http://localhost:8000/api/'
    )
  
)

new Vue(
    // your app here
)

现在，您可以对每个组件方法执行this.$api.get(...)

在此处阅读有关 Vue 插件的更多信息：https://vuejs.org/v2/guide/plugins.html

提供/注入也可以是一个选项：https://vuejs.org/v2/api/#provide-inject

【讨论】：

谢谢！清晰有效的解决方案

【参考方案3】：

浏览器中有一个可用的窗口对象。您可以根据自己的要求积极利用它。

在 main.js 文件中

import axiosApi from 'axios';

const axios = axiosApi.create(
    baseURL:`your_base_url`,
    headers: header:value 
);

//Use the window object to make it available globally.
window.axios = axios;

现在在你的 component.vue 中

methods:
    someMethod()
        axios.get('/endpoint').then(res => ).catch(err => );
    

这基本上是我在项目中全局使用 axios 的方式。另外，这也是 Laravel 使用它的方式。

【讨论】：

污染全局命名空间没有意义，这是非常糟糕的做法。

@PaulBrunache：我不认为这是一个坏习惯。 Axios 实例可以在其所有组件之间全局共享，您甚至可以拥有全局拦截器和中间件，用于请求和响应以附加或过滤某些请求类型。此外，Laravel 的创建者在 Laravel 核心文件中也是这样做的。你可以在这里查看github.com/laravel/laravel/blob/master/resources/js/…

在您需要的地方导入它并没有什么坏处。让它全球化似乎是一种懒惰。然而，留在 vues 生态系统中会是一个更好的解决方案，通过插件，或者只是覆盖 vue 的 http 实例，你可以这样做。$http...

@PaulBrunache ：覆盖 $http 实例是个好主意。我同意你的看法。使其全局可用是指在 xhr 事件发生时为请求和响应对象添加全局拦截器/中间件。即我可以将授权令牌附加到每个请求并直接在拦截器中为每个回复转换错误消息。

您可以将其包装在静态类中并传递必要的参数，例如您的令牌。实际上，您只是在需要的地方导入它，这是一个更好的选择。窗口对象应该是最后的手段，并且在调试中可能会变得混乱。我明白你想要做什么，但我要说的是污染全局命名空间会产生奇怪的副作用。只是我的 2 美分