axios
一.简单介绍
什么是axios
基于peomise对ajax的一种封装
我们的jQuery是不支持我们打包的,不支持我们个性化的CDN打包方式
引入axios
1.CDN引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.本地文件导入进去
简单入门
GET方式无参请求
//导入我们的资源、、js文件
axios({
url: '请求地址',
method: 'GET'
}).then(res=>{
consloe.log(res);
})
默认的请求方式是我们的GET方式
GET方式发送有参请求
请求查找id=1的用户,
地址栏拼接的方式
axios({
url: '请求地址?id=1'
}).then(res=>{
console.log(res);
});
配置文件的方式
axios({
url: '请求地址',
params:{
id: '1'
}
}).then(res=>{
console.log(res);
});
这个方式就比较适合发送多个参数的方式
Post方式发送请求
无参请求
//导入我们的资源、、js文件
axios({
url: '请求地址',
method: 'POST'
}).then(res=>{
consloe.log(res);
})
带有参数的POST请求
axios({
url: '请求地址/findByName'
data:{
name: '张三'
},
method: 'post'
}).then(res=>{
consle.log(res);
})
我们发送一个姓名为张三的,但是我们后台打印会出现null,这代表我们这个张三的值没有正常获取到,虽然请求发送出去了,但是数据没接收到
原因:
axios的POST请求方式请求负载携带的参数默认的是application/json格式,所以我们的后台控制器拿不到
解决办法
axios({
url: '请求地址/findByName'
params:{
name: '张三'
},
method: 'post'
}).then(res=>{
consle.log(res);
})
我们将data改成我们的params,使用这种方式将会把我们的参数进行拼接
也就是说,我们的参数以?和&拼接到了地址栏上
后续的解决方式我们在后面详细介绍
解决方式二: "name=张三 ”
解决方式三:服务 器端给接收的参数加上@RequestBody注解
后续对我们处理请求成功是怎么操作的,我这里是把他当成ajax()的success
二.基本使用
get方式简写
无参请求:请求所有用户
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('请求路径/findAll').then(res=>{
console.log(res);
}).catch(err=>{
console.log("timeout");
console.log(err);
})
</script>
有参请求:根据id请求我们的用户数据
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('请求路径/findAll',{params:{id:1}}).then(res=>{
console.log(res);
}).catch(err=>{
console.log("timeout");
console.log(err);
})
</script>
我们这个params也可以传递对象
post请求
无参请求:这个请求是获取全部数据,名字随意起的不要在意
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.post('请求地址/pGet').then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
有参请求:根据用户的名字,查找该用户的信息
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.post('请求地址/findByName',{params:{name:'张三'}}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
我们发现,我们发送了请求,但是控制单是not found,但是我们这个名字的用户确实是存在的,后台控制台是一个null,也就是说我们用**.post**不适用么?
解决办法
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.post('请求地址/findByName',"name=张三"}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
这个方式又如何传递多个数据呢?
<script>
axios.post('请求地址/findByName',"name=张三&age10"}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
而且我们发现这种情况,我们的地址栏并没有显示我们动态拼接字符串,所以我们更推荐这个种方式,这个只需要修改前端代码
或者我们的服务器端做手脚,这个就是@RequestBody,自动把我们的json数据转换成java对象,这个在我的spring mvc中有涉及
axios并发请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('地址/getAll'),
axios.get('地址/findById',{params:{id:1}})
]).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
第一个请求我们所有的用户,第二个请求我们id为1的用户
然会返回一个数组,数组两个值就是这个两个请求相应获得的值
如何将这两个对象分开呢
方法一:
console.log(res[0]);
console.log("---------------");
console.log(res[1]);
方法二:
spread函数,可以直接处理响应结果将我们的结果进行分割
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('地址/getAll'),
axios.get('地址/findById',{params:{id:1}})
]).then(
axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
})
).catch(err=>{
console.log(err);
})
</script>
三.全局配置
全局生效的意思
我们把我们的地址前缀可以提取出来
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.defaults.baseURL='http://localhost:8080/user';
axios.defaults.timeout=5000;
axios.get('getAllUser').then(res=>{
console.log(res)
});
axios.post('pGet').then(res=>{
console.log(res)
})
</script>
四.axios实例
创建我们自己的实例配置,而不是全部使用官方默认的,这样对于一些情况,我们的开发更为简单
<script src="axios.js"></script>
<script>
let newVar = axios.create({
baseURL : 'http://localhost:8080/user',
timeout : 5000
});//创建我们的axios实例
let newVar1 = axios.create({
baseURL : 'http://localhost:8080/user',
timeout : 5
});//创建我们的axios实例
newVar({
url:'getAllUser'
}).then(res=>{
console.log(res);
});
newVar1({
url:'getAllUser'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
我们的newVar可以请求成功,因为我们的请求时间足够长,可以打印正常结果
但是newVar1请求不成功,因为请求时间太短了
当然,我们newVar和newVar1的请求地址也是可以随意改变的,可以不一样的
五.axios拦截器
类似我们的Java拦截请求,axios的拦截器就是来拦截中断请求的,而且axios的拦截器分为request请求方向,和response响应方向的
主要用于在网络请求时,在发起请求或响应时对操作进行相应的处理
发起请求可以添加网页加载动画
使用token认证的时候,还可以在请求之前判断用户有无token,强制登录
相应的时候可以进行相应的数据处理
请求方向
成功请求
<script src="axios.js"></script>
<script>
axios.interceptors.request.use(config=>{
console.log("进入拦截器请求");
console.log("config");
},err=>{
console.log("请求方向失败");
console.log(err);
})
axios.get("http://localhost:8080/user/getAllUser").then(res=>{
console.log(res);
})
</script>
这个错误原因是为什么呢,因为我们拦截到了但是没有放行,没有放她走,我们需要放他走,我们这里可以打印了config之后return config,那我们就可以执行我们的axios的get请求了
失败请求
响应方向
成功请求
<script src="axios.js"></script>
<script>
axios.interceptors.response.use(config=>{
console.log("进入响应拦截器");
return config.data;
},err=>{
console.log("响应方向失败");
console.log(err);
})
axios.get("http://localhost:8080/user/getAllUser").then(res=>{
console.log(res);
})
</script>
失败请求
六.axios在vue中的模块封装
我们需要在我们的vue中安装我们的axios
npm install axios – – save
我们封装在了vue 中,那么怎么使用这个功能呢?
import axios from 'axios';
axios({
url:"地址/getAllUser"
}).then(res=>{
console.log(res);
})
我们怎么封装这个请求呢?
在我们的main.js中
但是我们在我们检查元素的时候发现结果是在request.js中打印结果的
但是我们想要在main.js中打印的,不是在模块中处理的,怎样处理这个情况呢?
解决办法一
那相应的我们的main.js中也得做出改变
封装方式二
封装位置
main.js的改变(调用者的改变)
封装方式三
封装方式和位置
调用者的改变
我们的Promise帮我们回调了,我们就不需要自己写函数操作来回调了
我们这个整体返回的是一个Promise对象 ,