vueCli4:如何使用axios获取服务端数据

1.安装axios

cnpm   install --save axios

2.引入axios

在main.js入口文件里面进行引入

import axios from 'axios'

3.将axios注入vue的原型

只有将axios注入vue的原型中，在其他组件中就可以直接使用axios了，非常方便，我们可以把axios定义为vue原型中的属性，在其他组件中就可以通过this.$axios进行使用了。

Vue.prototype.$axios=axios

4.使用axios获取远程数据

在home.vue文件中添加create周期函数

created(){
	  this.$axios.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20').then(res=>{
		  console.log(res);
	  })

代码分析
this：指的是当前组件实例vue
axios是基于prmoise的基础上获取远程数据的工具，因此，我们可以通过get方法调用服务求的方法，使用回调函数的方法获取到数据，测试结果如下

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
data: {result: Array(20)}
status: 200
statusText: "OK"
headers: {content-type: "text/html; charset=utf-8"}
config: {url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
__proto__: Object