1.axios简介
axios是目前前端最流行的ajax请求库，做了非常好的封装，使用起来很方便，react和vue的官方都在推荐大家使用。官方文档链接：axios文档
2.axios的特点
1．基于promise的异步ajax请求库（基于promise可以解决回调地狱） 2．浏览器端/node端都可以使用 3．支持请求/响应拦截器 4．支持请求取消 5．请求/响应数据转换 6．批量发送多个请求
3.axios的基本使用
3.1安装
1.通过npm安装，然后引入
$ npm install axios
2.还可以直接在线引入，方便学习的时候使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3.2发送请求
提前写一些按钮，绑定点击事件，通过点击事件来触发请求。
1.get请求（不带参数）
btn1.onclick = ()=>{
axios.get('http://localhost:5000/persons').then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
}
axios调用的返回值是Promise实例，成功的值叫response，失败的叫error
看下成功时的response，它是axios封装的一个对象，服务器返回的真正数据在response.data中
config是请求配置对象，记录了很多请求参数
headers是响应头，包含了内容长度等信息
request是请求
status是http状态码
请求失败时
2.get请求（带参数，查询）
携带query参数时，编写的配置项叫做params
获取所某个人---发送GET请求---携带query参数
查询id为某个数的人，详细写法，
axios({
url:'http://localhost:5000/person',
method:'GET',
params:{id:val.value}
}).then(
response =>{
console.log('成功',response.data);
},
error =>{
console.log('失败',error);
}
)
查询id为某个数的人，精简写法
axios.get('http://localhost:5000/person',{params:{id:val.value}}).then(
response =>{
console.log('成功',response.data);
},
error =>{
console.log('出错',error);
}
)
3.post请求
添加一个人---发送POST请求---携带json编码参数 或 urlencoded编码
请求参数在data里面，有两种方式，默认是json编码和urlencode编码
详细版写法（添加一个信息）
btn3.onclick= ()=>{
axios({
url:'http://localhost:5000/person',
method:'POST',
//data:{name:name.value,age:age.value} //携带请求体参数，默认是json编码
data:`name=${name.value}&age=${age.value}`, //urlencode编码
}).then(
response =>{
console.log('成功',response.data);
},
error =>{
console.log('失败',error);
}
)
}
精简版写法
精简版1
axios.post('http://localhost:5000/person',{name:name.value,age:age.value}).then(
response =>{console.log(response.data);},
error=>{console.log(error);}
)
精简版2
axios.post('http://localhost:5000/person',`name=${name.value}&age=${age.value}`).then(
response =>{console.log(response.data);},
error=>{console.log(error);}
)
4.put请求
更新一个人---发送PUT请求---携带json编码参数 或 urlencoded编码
btn4.onclick = ()=>{
axios({
url:'http://localhost:5000/person',
method:'PUT',
data:{
id:updateId.value,
name:updateName.value,
age:updateAge.value
}
}).then(
response =>{console.log('成功',response.data);},
error =>{console.log(error);}
)
}
精简写
axios.put('http://localhost:5000/person',{
id:personUpdateId.value,
name:personUpdateName.value,
age:personUpdateAge.value
}).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
5.delete请求
删除一个人---发送DELETE请求---携带params参数
btn5.onclick = ()=>{
axios({
url:`http://localhost:5000/person/${personDeleteId.value}`,
method:'DELETE',
}).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
}
6.小结
1.axios调用的返回值是Promise实例。
2.成功的值叫response，失败的值叫error。
3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
4.携带query参数时，编写的配置项叫做params （get请求，查某个人）
5.携带params参数时，就需要自己手动拼在url中（删除某个人）
4.axios常用配置
axios(
{
url:'' //请求地址
params:{delay:3000},//配置query参数
data:{c:3,d:3},//配置请求体参数(json编码)
data:'e=5&f=6',//配置请求体参数(urlencoded编码)
timeout:2000,//配置超时时间
headers:{school:'atguigu'} //配置请求头
responseType:'json'//配置响应数据的格式(默认值)
}
)
如果要给axios配置一些默认的属性，可以这样
axios.defaults.timeout = 2000 给所有的axios请求规定超时时间
axios.defaults.headers = {school:'atguigu'} 给所有的axios请求添加请求头
axios.defaults.baseURL = 'http://localhost:5000' 给所有的axios设置相同的请求路径（前半截）
5.axios的create方法
开发过程中可能需要给不同的接口大量的请求，如果我们配置了axios 的默认路径，想要给其他接口发请求时会冲突，这时候就需要重新创建一个axios用来服务于新的接口，相当于克隆了一个新的axios
使用方式举例：
const axios2 = axios.create({
timeout:3000,
headers:{name:'tom'},
baseURL:'https://api.apiopen.top'
})
在创建的时候就可以直接设置相关的配置
需要注意的是，“克隆”出来的axios并不完全等于原来的axios，还是有一些区别的，注意事项如下：
axios.create(config)
- 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
- 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
- 为什么要设计这个语法?
需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样
6.axios拦截器
6.1请求拦截器
请求拦截器是：在真正发请求前执行的一个回调函数
作用：对所有的请求做统一的处理：追加请求头、追加参数、界面loading提示等等
用法：
//请求拦截器
axios.interceptors.request.use((config)=>{
//中间写入一些业务代码，对请求进行处理，这里写一点作为示例
console.log('请求拦截器1执行了');
if(Date.now() % 2 === 0){
config.headers.token = 'atguigu'
}
return config
})
注意：
请求拦截器必须带上config这个参数，并且最后要return出来，config是axios的配置项打包而成的一个对象，通过config可以对请求做很多处理。
请求拦截器要在使用axios发送请求之前写好。
6.2响应拦截器
它是得到响应之后执行的一组回调函数
作用：
若请求成功，对成功的数据进行处理
若请求失败，对失败进行统一的操作
axios.interceptors.response.use(
response =>{
return response
},
error=>{
//axios认为，响应状态码不是2开头的，都应该报错
}
)
响应拦截器搭配axios 优化写法。在响应拦截的时候做好了错误处置。
axios.interceptors.response.use(
response => {
console.log('响应拦截器成功的回调执行了',response);
if(Date.now() % 2 === 0) return response.data
else return '时间戳不是偶数，不能给你数据'
},
error => {
console.log('响应拦截器失败的回调执行了');
alert(error);
return new Promise(()=>{})
}
)
btn.onclick = async()=>{
const result = await axios.get('http://localhost:5000/persons21')
console.log(result);
}
7.axios批量发请求
7.批量发请求
btn.onclick = async()=>{
axios.all([
axios.get('http://localhost:5000/test1'),
axios.get('http://localhost:5000/test2?delay=3000'),
axios.get('http://localhost:5000/test3'),
]).then(
response => {console.log(response);},
error => {console.log(error);}
)
}
\
