Vue axios请求ajax

这里没有后台，用本地文件代替
首先要在vue项目中配置上axios，终端中输入

npm install axios --save

这里可以用cnpm代替

然后在需要获取数据的那一页的methods里写上这些

getHomeInfo(){  //方法名可换
	axios.get('/static/mock/index.json')
	.then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res) {
	console.log(res)
}

这时候控制台输出的res就是获取到的数据文件
我这里是static目录下的mock中的index.json文件

这里可以看到输出的res是一个Object
里面的data正式请求的数据
所以获取到的数据应该是res.data
要把数据放到Vue的data中需要先在data中定义一个数据
比如我要请求我的json中的city和swiperList

{
  "data": {
		"city": "北京",
    "swiperList": [{
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
      },{
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
      },{
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"
      },{
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg"
      }]
   }
}

我需要先在data中定义相应的空数据

data(){
	return{
		city: '',  //city是一个字符串
		swiperList:[]  //swiperList是一个数组
	}
}

然后在getHomeInfoSucc方法中把获取到的数据替换掉data中的空数据

getHomeInfoSucc(res) {
	res = res.data
	if (res.data) {
		const data = res.data
		this.city = data.city
		this.swiperList = data.swiperList
	}
}

最后将值传递到相应的组件就可以展示在页面上了