axios的使用以及/api/路径的配置--去哪儿网(三)

vue中使用axios首先需要npm下载axios的安装包

npm install axios --save

在main.js中引入axios，这样就可以在全局使用axios了

//main.js
import axios from 'axios'

然后在项目根目录下的static中创建mock文件夹，里面放测试用的json文件

在需要调接口的文件中使用axios调取接口

//Home.vue
mounted(){
	this.getHomeInfo();
},
methods: {
	getHomeInfo(){
		axios.get('/api/index.json').then(this.getHomeInfoSucc)
	},
	getHomeInfoSucc(res){
		const ress = res.data
		if (ress.ret && ress.data) {
		  const data = ress.data
		  this.swiperList = data.swiperList
		  this.iconList = data.iconList
		  this.recommendList = data.recommendList
		  this.weekendList = data.weekendList
		}
		console.log(res)
	}
}

可以看到在get方法中请求的路径是： ‘/api/index.json’，这里的/api需要我们去配置
打开config文件夹下的index.js文件，然后找到proxyTable进行配置

proxyTable: {
	'/api': {
	 	target: 'http://localhost:8081/',
	  	pathRewrite: {
	    	'^/api': '/static/mock'
  	}
}

这样就可以访问到数据了