vue 封装axios

Vue可以使用Axios来发送http请求。Axios是一个基于promise的HTTP客户端，用于浏览器和node.js。

在Vue中，我们可以将Axios封装成一个插件，使其更易于使用。以下是如何封装Axios的步骤：

1. 安装axios

在终端中运行以下命令来安装axios：

npm install axios --save

2. 创建一个axios插件文件

在src目录下创建一个名为axios.js的文件。在这个文件中，我们将创建一个axios插件。

import axios from 'axios';

const AxiosPlugin = {};

AxiosPlugin.install = function(Vue) {
  Vue.prototype.$axios = axios;
}

export default AxiosPlugin;

在这个插件中，我们将axios赋值给Vue的原型属性$axios。

3. 在main.js中引入Axios插件

在main.js中引入Axios插件，并使用Vue.use()方法来安装插件。

import Vue from 'vue';
import App from './App.vue';
import AxiosPlugin from './axios';

Vue.config.productionTip = false;

Vue.use(AxiosPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

4. 使用Axios

现在，我们可以在Vue组件中使用$axios来发送http请求了。

export default {
  data() {
    return {
      posts: [],
    };
  },
  mounted() {
    this.$axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};

这是一个简单的封装Axios的例子。我们可以根据需要进行修改和扩展。