使用Axios替代vue-resource 1

这篇博文主要是简述利用Axios来进行数据请求的三种方式：

首先你得有一台电电电电脑，开玩笑的。
首先你得有一定的关于Vue的基础，然后很简单我们需要在我们的工程里，安装axios依赖包，只要在终端命令输入“npm install --save axios”进行下载axios依赖包即可。

第一种
直接在你需要请求数据的界面请求数据即可（局部请求），以下是相关的JS代码
（bank.vue）

<script>
 import axios from "axios";
export default {
  data() {
    return {
      bankdata: []
    };
  },
created() {//利用生命周期的函数，在界面还没加载完成前进行数据请求
    axios
      .get("https://cnodejs.org/api/v1/user/alsotang")
      .then(res => {
        console.log(res);
        const data = res;
        this.bankdata = res.data.data;
        console.log(this.bankdata);
      })
      .catch(error => console.log(error));
  }
};
</script>

第二种
第二种是全局数据请求，需要写两个界面。
main.js:

import Vue from 'vue'
import App from './App'
// import router from './router'
import VueRouter from 'vue-router'
import { routes } from './routes'
import axios from 'axios'//关键是这句啊

axios.defaults.baseURL = 'https://cnodejs.org/api/v1/user/alsotang'//还有这句啊

Vue.config.productionTip = false

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

你需要使用数据的界面（bank.vue）

<script>
 import axios from "axios";
export default {
  data() {
    return {
      bankdata: []
    };
  },
  created() {//利用生命周期的函数，在界面还没加载完成前进行数据请求
    axios
      .get("")
      .then(res => {
        console.log(res);
        const data = res;
        this.bankdata = res.data.data;
        console.log(this.bankdata);
      })
      .catch(error => console.log(error));
  }
};
</script>

因为在main.js设置的配置是作用于应用里的所有文件的，所以其他的任何vue文件都可以进行调用。就不需要重复的在各个界面里多次书写请求数据的链接，提高了可维护性。

第三种（究极版）
第三种是直接封装请求数据的代码（方法）到一个文件里，然后其他的vue文件需要时直接调用即可。
axios.js(封装的文件):

// 封装数据请求方法
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://cnodejs.org/api/v1/user/alsotang'
})
// 改全局header
instance.defaults.headers.common['SOMTING'] = 'something'
export default instance

bank.js:

<script>
import axios from "@/config/axios";//这里不一样，直接引用axios.js文件

export default {
  data() {
    return {
      bankdata: []
    };
  },

  created() {
    axios
      .get("")
      .then(res => {
        console.log(res);
        const data = res;
        this.bankdata = res.data.data;
        console.log(this.bankdata);
      })
      .catch(error => console.log(error));
  }
};
</script>

好了三种方法，当然这只是最基础的三种写法，你也可以在此基础上添加上你所需要的各种逻辑，实现相应的功能。如果有错也请您指出，我会及时改正。