axios 在 Vue 项目中如何进行封装

发出 Ajax 请求的 API 在团队协作的时候很有可能是封装好，直接给团队成员使用的，简单来讲大约分为三种。演示使用 axios 如果你使用 jQuery可自行参考改变代码：

一、插件法

安装两个 npm 包：

npm install --save axios vue-axios

一般情况下在入口文件 main.js 里面配置：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

这样任何子组件都可以使用，使用方法有三种：

Vue.axios.get(url).then((response) => {
  console.log(response.data)
})
 
this.axios.get(url).then((response) => {
  console.log(response.data)
})
 
this.$http.get(url).then((response) => {
  console.log(response.data)
})

二、原型法——发送 Ajax 封装在 Vue 的原型上

import axios from "axios";
Vue.prototype.$axios = axios;

子组件使用方法：

this.$axios.get('url')
.then((data)=>{
   console.log(data.data);
})

vuex 里面使用

import Vue from 'Vue';
//可以直接
Vue.prototype.$axios.get(url).then(data=>data.data)

三、引包法

主入口文件直接引用，main.js：

import axios from axios;