axios

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对象 ，