axios的详细讲解
廉博赡
npm install axios
2、利用cdn（常用）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
三 axios发送get、post请求
1、get请求
//get请求方式一：
axios({
// 默认请求方式为get
method: 'get',
url: '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("api", {
// 传递参数
params: {
key: value
},
// 设置请求头信息，可以传递空值
headers: {
key: value
}
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败，
console.log(error);
});
2、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()
//方法一：请求成功时响应的是一个数组
<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>
五 axios的全局配置
首先通过axios.defaults.baseURL抽离出公共的部分，在各部分请求地址时可以省去公共的部分，适用于项目中所有的axios请求。
//baseURL的举例，还可以配置headers等
<script>
axios.defaults.baseURL="http://localhost:8888/";
axios.defaults.timeout=4000;
axios.get("info").then(res=>{
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提供了两种拦截器：
1、请求拦截器（成功，失败）
2、响应拦截器（成功，失败）
拦截器的作用：
1、在网络请求时发起请求
2、请求响应时对操作进行相应的处理
拦截器的使用案例：
1、请求拦截器成功时，可以添加网页加载的动画等
2、响应拦截器成功时，可以进行数据的相应处理
//定义了两个请求拦截器，两个响应拦截器，为了看运行流程
<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>
拦截器运行结果：
请求拦截器方向成功2
请求拦截器方向成功1
响应拦截器方向成功1
响应拦截器方向成功2
object
根据结果，我们看到请求拦截器后定义先运行，响应拦截器先定义先运行。
类似资料：