拦截器 (请求和响应) 和防抖,节流(使用方法和使用场景)

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 次。
​ 作用：减少逻辑执行的次数。
​ 场景：页面新闻刷新，浏览器大小改变页面适配。
​ 好处：这样可以有效减少请求的次数，节省网络资源。
案例：设计游戏。点击技能,使用后再点就不能触发