axios详解
一、axios的特性
axios是一个给予Promise，用于浏览器和node.js的HTTP客户端，简单的理解就是 Ajax的封装。
特性：
- 从浏览器中创建 XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
二、axios的安装
-
利用npm安装
npm install axios -
利用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
三、axios发送get、post请求
- get请求
//get请求方式一：
axios({
// 默认请求方式为get
method: 'get',
url: 'http://api',
// 传递参数
params: {
key: value
},
// 设置请求头信息
headers: {
key: value
}
responseType: 'json'
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败，
console.log(error);
});
//get请求方式二：
axios.get("http://api", {
// 传递参数
params: {
key: value
},
// 设置请求头信息，可以传递空值
headers: {
key: value
}
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败，
console.log(error);
});
- post请求
//post请求方式一：
// 注：post请求方法有的要求参数格式为formdata格式，此时需要借助 Qs.stringify()方法将对象转换为字符串
let obj = qs.stringify({
key: value
});
axios({
method: 'post',
url: 'api',
// 传递参数
data: obj,
// 设置请求头信息
headers: {
key: value
},
responseType: 'json'
}).then((response )=> {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败，
console.log(error);
});
//post请求方式二：
let data = {
key: value
},
headers = {
USERID: "",
TOKEN: ""
};
// 若无headers信息时，可传空对象占用参数位置
axios.post("api", qs.stringify(data), {
headers
}
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败，
console.log(error);
});
注意：
- post 请求的时候参数通过data进行传递。
- get请求的时候参数通过params进行传递。
四、axios发送并发请求
作用：解决并发请求
主要用到两个函数：
axios.all([])
axios.spread()
axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。注意：该方法是axios的静态方法，不是axios实例的方法！
//方法一：请求成功时响应的是一个数组
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('http://localhost:8888/info'),
axios.get('http://localhost:8888/infos')
]).then((res) => {
console.log(res[0]); //第一个axios请求得到的
console.log(res[1]); //第二个axios请求得到的
}).catch((err) => {
console.log(err);
})
</script>
//方法二：采用axios提供的spread函数处理响应数组结果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('http://localhost:8888/info'),
axios.get('http://localhost:8888/infos')
]).then(axios.spread((res1,res2) =>{
console.log(res1); //第一个axios请求得到的
console.log(res2); //第二个axios请求得到的
})).catch((err) => {
console.log(err);
})
</script>
//在methods中定义请求方法，并return出去，不要写请求回调then()
methods:{
getAllTask:function(){
console.log('调用第一个接口')
return this.$axios({
url:'http://192.168.*.**:***/api/getTask/getAllData',
method:'GET',
params:{
offset:1,
pageSize:10
}
})
},
getAllCity:function(){
console.log('调用第二个接口')
return this.$axios({
url:'http://192.168.*.**:***/city/getCities',
method:'GET',
})
}
},
//在mounted周期同时发送两个请求，并在请求都结束后，输出结果
mounted:function(){
var _this = this; //注意！一定要重新定义一下this指向
this.$axios.all([_this.getAllTask(),_this.getAllCity()])
.then(me.$axios.spread(function(res1, res2){
console.log('所有请求完成')
console.log('请求1结果',res1)
console.log('请求2结果',res2)
}))
}
总结：两个请求执行完成后，才执行axios.spread()中的函数，且axios.spread()回调函数的返回值中的请求结果的顺序和请求的顺序一致。
五、axios的全局配置
-
在main.js文件中配置如下：
- 全局配置axios的请求根路径
- 把axios挂载到vue.prototype上，工每个.vue组件的实例直接使用
// 全局配置 axios 的请求根路径 //axios.defaults.baseURL固定写法 axios.defaults.baseURL = 'http://www.liulongbin.top:3006' // 把 axios 挂载到 Vue.prototype 上，供每个 .vue 组件的实例直接使用 //$http可自己命名（建议使用$http） Vue.prototype.$http = axios -
在需要发起axios请求的组件中使用
<template>
<div class="left-container">
<h3>Left 组件</h3>
<button @click="getInfo">发起 GET 请求</button>
<button @click="btnGetBooks">获取图书列表的数据</button>
</div>
</template>
<script>
export default {
methods: {
async getInfo() {
const { data: res } = await this.$http.get('/api/get')
console.log(res)
},
// 点击按钮，获取图书列表的数据
async btnGetBooks() {
const { data: res } = await this.$http.get('/api/getbooks')
console.log(res)
}
}
}
</script>
六、axios创建实例
项目中网络请求可能不止一个，可以创建多个axios实例进行不同的配置。
<script>
//创建一个axios的实例
let instance=axios.create({
baseURL:"http://localhost:8888/",
timeout:4000
})
//实例的使用
instance({
url: "info"
}).then(res=>{
console.log(res);
})
</script>
七、axios的拦截器
axios提供了两种拦截器：
- 请求拦截器（成功、失败）
- 响应拦截器（成功、失败）
拦截器的作用：
- 在网络请求时发起请求
- 请求响应时对操作进行相应的处理
拦截器的使用案例：
- 请求拦截器成功时，可以添加网页加载的动画等
- 响应拦截器成功时，可以进行数据的相应处理
//定义了两个请求拦截器，两个响应拦截器，为了看运行流程
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//axios的请求拦截器，在axios进行网络请求之前触发
axios.interceptors.request.use(
config => {
//在发送请求之前做些什么
console.log("请求拦截器方向成功1");
return config; //请求拦截成功时必须返回config
},
error => {
//对请求错误做些什么
console.log("请求拦截器方向失败1");
return Promise.reject(error);
}
)
axios.interceptors.request.use(
config => {
console.log("请求拦截器方向成功2");
return config; //请求拦截成功时必须返回config
},
error => {
console.log("请求拦截器方向失败2");
return Promise.reject(error);
}
)
//axios的响应拦截器，在axios响应数据之前触发
axios.interceptors.response.use(
response => {
//对响应数据做点什么
console.log("响应拦截器方向成功1");
return response; //响应拦截器成功时必须返回response
},
error => {
//对错误数据做点什么
console.log("响应拦截器方向失败1");
return Promise.reject(error);
}
)
axios.interceptors.response.use(
response => {
console.log("响应拦截器方向成功2");
return response; //响应拦截器成功时必须返回response
},
error => {
console.log("响应拦截器方向失败2");
return Promise.reject(error);
}
)
//axios发送get请求
axios.get('http://localhost:8888/info').then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
