vue 框架中如何用axios数据请求

1.用axios进行数据请求
axios是一个用于表单请求数据的库，是一个基于Promise,同时支持浏览器端与node.js的HTTP库，常用于Ajax请求
Vue.js本身并没有自带Ajax请求，需要借助插件或第三方库

2.GET和POST请求

axios.get("./package.json",{
	params:{
		userId:"0000"
	},
	headers:{
		token:""
	}
}).then(res=>{
	this.msg = res.data;
}).catch(err=>{
	console.log(err);
})

POST请求,axios.post('./package.json',{
	userId:'888',
	headers:{
		token:'tom'
	}
}).then(res=>{
	this.msg = res.data;
}).catch(err=>{
	console.log(err);
})

2.基于Promise可以执行多个并发请求

function getUserAccount(){
	return axios.get('/user/123');
}
function getUserPermissions(){
	return axios.get('/user/12345/permissions');
}
axios.all([ getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
	//请求完毕
}))

3.可以通过写入配置的形式发起请求

axios({
	methods:'post',
	url:'/user/123',
	data:{
		firstname:'fred',
		lastname:'hu',
	}
}).then(res=>{
	console.log(res)
})

4.在业务中经常将其封装为实例形式调用，便于通用配置

const instance = axios.create({
	baseUrl:'http://jsonplaceholder.com/',
	timeout:1000,
	headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
export default instance

5.在mounted中调用

Ajax({
	methods:'post',
	url:'/user/123',
	data:{
		firstname:'fred',
		lastname:'hu',
	}
}).then(res=>{
	console.log(res.data);
	this.msg = res.data;
})

6.进行强拦截可用于loading

	axios.interceptors.request.use(config=>{
    	 	 console.log("require init");
    	 	 return config
    	 })
    	 	 axios.interceptors.response.use(response=>{
    	 	 console.log("response init");
    	 	 return response
    	 })