拦截器 (请求和响应) 和防抖,节流(使用方法和使用场景)_如何在响应拦截器里面加节流-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43944285/article/details/124372362

本文介绍了axios的请求和响应拦截器，强调了它们在封装重复业务逻辑和提高代码复用性上的优势。同时，讲解了防抖和节流的概念、作用及应用场景，如搜索框的防抖实现和页面适配的节流应用，以减少不必要的网络请求，优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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