全局 Axios Vue 2

简介

Axios 是一个基于 Promise 的 HTTP 库，可用于浏览器和 Node.js，可与 Vue.js 完美结合使用。在Vue中全局使用Axios，可方便地进行网络请求。本文将介绍如何在Vue 2中使用全局Axios，并附有相应的代码示例。

安装

为了使用全局 Axios，需要先安装 Axios 和 Vue：

npm install axios vue --save

引入

在Vue项目入口文件中（例如main.js），引入Axios：

import Axios from 'axios';

创建 Axios 实例

可以使用 Axios.create() 方法，创建一个 Axios 实例，并在实例上设置一些默认的配置选项，例如 baseURL，timeout 等。

const axiosInstance = Axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 10000,
  headers: {
    'X-Custom-Header': 'foobar'
  }
});

调用

在组件中，可以使用 this.$http 或 this.$axios 来调用 Axios 实例中的方法：

export default {
  methods: {
    getData() {
      this.$http.get('/user?id=12345')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

配置全局 Axios

为了在整个应用程序中支持 Axios，可以将它添加到 Vue 的 prototype 上。以下代码将全局 Axios 添加到 Vue 的 prototype 上：

Vue.prototype.$http = Axios;

现在，可以在任何组件中使用 $http 或 $axios 来调用 Axios 实例中的方法：

export default {
  methods: {
    getData() {
      this.$http.get('/user?id=12345')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

整体代码

下面是一个完整的示例：

// main.js
import Vue from 'vue';
import Axios from 'axios';

const axiosInstance = Axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 10000,
  headers: {
    'X-Custom-Header': 'foobar'
  }
});

Vue.prototype.$http = axiosInstance;

// component.vue
export default {
  methods: {
    getData() {
      this.$http.get('/user?id=12345')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

结语

现在你已经学会了如何在 Vue 中使用全局 Axios，祝你成功实现网络请求！