axios的详细讲解
axios的详细讲解 es6三方库
·
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
根据结果,我们看到请求拦截器后定义先运行,响应拦截器先定义先运行。
更多推荐
所有评论(0)