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
})