axios是一个基于promise的http库,可以发送get,post请求(axios对ajax的封装),
正由于Vue,React的出现,促使了axios轻量级库的出现
直接使用会报错,需要下载axios,
下载安装命令npm install --save axios
使用axios在vue中发送ajax请求
- get方式
// 访问github的search接口
let url = `https://api.github.com/search/repositories?q=${
this.queryName}`;
axios.get(url).then(
// 当请求成功时触发此函数,参数response即是接收到的数据
response => {
// console.log(response.data.items);//直接获取数据跨域报错
// 我们要取的接口中的数据在数组中,而数组外面又被对象包含着
// 先定义一个变量转存一下数据对象
let result = response.data;
console.log(result);
// 再用一个数组转存一下数组
let array = result.items[0]; //去数组中第一条数据
console.log(array);
this.reqName = array.name;
this.reqUrl = array.html_url;
},
// 如果接口有问题时触发此函数,进行处理
err => {
console.log("接口出错了" + err);
}).catch(error => {
//如果请求出错触发此函数,捕获错误信息
console.log("请求过程出错了" + error);
});
- post方式
axios.post('/user',{
firstName:"AA",
lastName:"aa"
}).then(response=>{
console.log(response);
}).catch(function(error){
console.log("请求出错了");
});
- 执行多个并发请求
function getUser(){
return axios.get(url); //返回一个get请求
}
function postUser(){
return axios.post(url,{
a:1}); //返回一个post请求
}
axios.all([getUser(),postUser()]).then().catch(){
};
}
- 配置对象方式
axios({
methods:"post",
url:"/user/abc"