axios简介
axios是什么？
- 前端最流行的ajax请求库；
- React、Vue官方都推荐使用axios发ajax请求；
- 文档：https://github.com/axios/axios
axios特点
- 基于promise的异步ajax请求库；
- 浏览器端、node端都可以使用；
- 支持请求、响应拦截器；
- 支持请求取消；
- 请求、响应数据转换；
- 批量发送多个请求。
解决的痛点
- 解决了回调地狱
- 拦截器
- 批量发送请求
axios发送一个简单的get请求
- axios调用的返回值是promise实例；
- 成功的值叫reponse，失败的值叫error；
- axios成功的值是一个axios封装的response对象，服务器返回的真正的数据在response.data中；
- 携带query参数时，编写的配置项叫做params；
- 携带params参数时，就需要自己手动拼在url中。
案例
- get请求不带参数
完整版
<srcipt>
{/* 获取按钮 */}
const btn1 = document.getElementById('btn1')
{/* 发送GET请求---不携带参数 */}
btn1.onclick = ()=>{
axios({
url: 'http://loclhost:5000/persons',//请求地址
methods: 'GET',//请求方式
}).then(
response => {
console.log('请求成功了', response.data);
},
error => {
console.log('请求失败了', error);
}
)
}
</srcipt>精简版
<srcipt>
axios.get('http://localhost:5000/persons').then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
</srcipt>- get请求携带参数
完整版
<srcipt>
axios({
url: 'http://loclhost:5000/persons',//请求地址
methods: 'GET',//请求方式
params: {id: personId.value}//此处写的时params，但携带的时query参数
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)
</srcipt>精简版
<srcipt>
axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
</srcipt>- post请求携带参数
完整版
axios({
url: 'http://loclhost:5000/persons',//请求地址
methods: 'POST',//请求方式
data: {name: personName.value, age: personAge.value}//携带请求体参数（json编码）
// data：`name=${personName.value}&age=${personAge.value}`//携带请求体参数（urlencoded参数）
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)精简版
<srcipt>
{/* json编码 */}
axios.post('http://localhost:5000/person', {name: personName.value, age: personAge.value}).then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
</srcipt><srcipt>
{/* urlencoded编码 */}
axios.post('http://localhost:5000/person', `name=${personName.value}&age=${personAge.value}`).then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
</srcipt>- put请求
完整版
<srcipt>
axios({
url: 'http://loclhost:5000/persons',//请求地址
methods: 'PUT',//请求方式
data: {
id: personUpdateId.value,
name: personUpdateName.value,
age: personUpdateAge.value
}
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)
</srcipt>精简版
<srcipt>
axios.post('http://localhost:5000/person', {
id: personUpdateId.value,
name: personUpdateName.value,
age: personUpdateAge.value
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)
</srcipt>- delete请求
//携带params参数
<srcipt>
axios({
url: 'http://loclhost:5000/persons/${personDeleteId.value}',//请求地址
methods: 'DELETE',//请求方式
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)
</srcipt>axios常用配置项
<srcipt>
axios({
url: 'http://loclhost:5000/persons',//请求地址
methods: 'GET',//请求方式
params: {delay: 3000},//配置query参数
// data: {c:3, d:3},//配置请求体参数(json编码)
// data: 'e=5&f=9',//配置请求体参数(urlencoded编码)
timeout: 2000,//配置超时时间
// headers: {demo: 123},//配置请求头
// responseType: 'json'//配置响应数据的格式
}).then(
response => {console.log('请求成功了', response.data)},
error => {console.log('请求失败了',error)}
)
</srcipt>给axios设置默认属性
axios.defaults.timeout = 2000
axios.defaults.headers = {token: 'd87dgyaohildjdodsdasadmlsa '}
axios.defaults.baseURL = 'http://localhost:5000'axios常用API
axios.create(config)
- 根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置；
- 新axios只是没有取消请求和批量发请求的方法，其它所有语法都是一致的。
为什么设计这个语法
项目中有部分接口需要的配置与另一个接口需要的配置不太一样。
案例
const axios2 = axios.create({
timeout: 3000,
// headers: {name: 'tom'},
baseURL: 'https://api.apiopen.top'
})请求拦截器
是什么
在真正发请求前执行的一个回调函数。
作用
对所有的请求做统一处理：追加请求头、追加参数、界面loading提示等等。
案例
<srcipt>
axios.interceptors.request.use(()=>{
if(Date.now() % 2 === 0){
config.headers.token = 'testtest'
}
return config
})
btn.onclick = ()=>{
axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
}
</srcipt>响应拦截器
是什么
得到响应后执行的一组回调函数。
作用
若请求成功，对成功的数据进行处理；
若请求失败，对失败进行进一步操作。
案例
<srcipt>
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 = ()=>{
axios.get('http://localhost:5000/person', {params: {personId.value}}).then(
response => {console.log('请求成功了', response.data);},
error => {console.log('请求失败了',error);}
)
}
</srcipt>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
