axios 拦截器的用法(请求.处理.响应)
拦截器(interceptors)用来全局拦截 axios 的每一次请求与响应。
**好处:可以把每个请求中,某些重复性的业务代码封装到拦截器中,提高代码的复用性。
**
axios 请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//一部分请求拦截器因为所有请求,无须逻辑判断,都要执行操作,所以记性了全局的 axios 默认值 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
防抖和节流的使用
1. 防抖
概念:防抖(debounce)指的是:频繁触发某个操作时,只执行最后一次。
作用:减少逻辑执行的次数。
场景:搜索框只在输入完后,才执行查询的请求。
好处:这样可以有效减少请求的次数,节省网络资源。
**案例:淘宝搜索 搜索框会在最后输入传输ajax **
2节流
概念:节流(throttle)指的是:单位时间内,频繁触发同一个操作,只会触发 1 次。
作用:减少逻辑执行的次数。
场景:页面新闻刷新,浏览器大小改变页面适配。
好处:这样可以有效减少请求的次数,节省网络资源。
案例:设计游戏。点击技能,使用后再点就不能触发