目录
1、项目中引入Axios
2、使用Axios发送请求
2.1、例：发送GET请求
2.2、例：发送POST请求
3、axios并发请求
4、拦截器
1、项目中引入Axios
注：个人学习笔记，因自己学过后端，所以有关后端的代码，我在这里就不展示了~
不了解后端的宝子，也不会耽误学习，因为公司里会有写好的接口文档，直接使用就可以了
2、使用Axios发送请求
2.1、例：发送GET请求
axios.get("http://localhost:8080/user?id=1").then(function(res) {
console.log(res);
}).catch(function(error){
console.log(error);
});
// es6中简化写法：lambada表达式
axios.get("http://localhost:8080/user?id=2").then((res)=> {
console.log(res);
}).catch((error)=> {
console.log(error);
});
格式其实还是挺简单的~
2.2、例：发送POST请求
axios.post("http://localhost:8080/user",{
name:"xxx",
age:10
}).then((res)=> {
console.log(res);
}).catch((error)=> {
console.log(error);
});
3、axios并发请求
并发请求：将多个请求在同一时刻发送到后端服务接口，最后在集中处理每个请求的响应结果
代码：
function test1() {
return axios.get("http://localhost:8080/user?id=3");
}
function test2() {
return axios.get("http://localhost:8080/user?id=4");
}
axios.all([test1(),test2()]).then(
axios.spread((res_test1,res_test2)=> {
console.log(res_test1);
console.log(res_test2);
})
);
4、拦截器
作用：用来将axios中共有参数，响应公共处理交给拦截处理，减少axios发送请求时代码冗余类型：请求拦截器；响应拦截器
使用：
//创建axios的配置对象
var instance = axios.create({
baseURL:"http://localhost:8080/",
timeout:5000
});
//请求拦截器
instance.interceptors.request.use(function(config) {
config.url += "?token=1111"
return config;
});
//响应拦截器
instance.interceptors.response.use(function(response) {
if(response.status == 500) {
alert("服务器内部故障");
}
return response
});
好啦，以上就是简单的学习，简单了解一下，axios的强大之处~
后面周末会做一个简单小项目练练手，到时候再和大家分享分享~
文章链接
发表评论