用lodash去抖axios拦截器实例？答案

【问题标题】：Debounce axios interceptor instance with lodash?用lodash去抖axios拦截器实例？
【发布时间】：2021-06-09 19:36:15
【问题描述】：

我正在使用一个称为网络繁忙状态的状态道具来切换 UI 中的元素。

因为状态可以非常快地来回变化，所以我的微调器看起来快要崩溃了。

有没有简单的方法，使用 lodash _.debounce 来限制这段代码？

const instance = axios.create({
  baseURL: environment.CUSTOM_BASE_URL,
});

instance.interceptors.request.use((config) => {
  store.commit("setNetworkBusyStatus", true);
  return config;
});

instance.interceptors.response.use(
  (response) => {
    store.commit("setNetworkBusyStatus", false); // wait for X ms because this is going to get set back to true in a millisecond.
    return response;
  },
  (error) => {
    if ([401, 403].includes(error.response.status)) {
      store.commit("delUserData");
      router.push("/login");
    }
    return Promise.reject(error);
  },
);

【问题讨论】：

这可能是一个需要实现去抖动的微调器，因为问题在于它的视觉表示。拦截器只是完成它的工作并保持 setNetworkBusyStatus 是最新的。
@EstusFlask 谢谢。它实际上只是一个带有 CSS 动画的 SVG。它在很多情况下看起来都很好，但很少，不是因为它的v-if="networkBusyStatus" 正在快速重新渲染它，这取决于我是否进行了大量的快速网络调用。我同意整个事情可以重构为更智能。只是在寻找快速解决方案。
应该是const reqInterceptor = debounce((config) => { ... }) ... instance.interceptors.request.use(reqInterceptor)，但我认为它是错误的，因为。 req 和 res 拦截器不能保证按顺序运行，并且会弄乱状态。一个适当的快速修复方法是使用 debounced watch 函数或 setter 方法更新 networkBusyStatus watcher 中的微调器状态。后者将非常接近我刚刚遇到的问题stackoverflow.com/questions/67909124/…。
加载器状态也很简单，并发请求时会出现错误。布尔状态是不够的，它应该计算请求和响应
@EstusFlask 成功了。我只是无耻地在 setNetworkBusyStatus 设置器中添加了一个短暂的超时。

标签： javascript vue.js axios debounce

【解决方案1】：

你这样做

import _ from 'lodash'
// vuex code
mutations:{
   setNetworkBusyStatus= _.debounce(function(){
    xxxx
})
}
// axios code
instance.interceptors.response.use(
  (response) => {
    store.commit("setNetworkBusyStatus", false); // wait for X ms because this is going to get set back to true in a millisecond.
    return response;
  },
  (error) => {
    if ([401, 403].includes(error.response.status)) {
      store.commit("delUserData");
      router.push("/login");
    }
    return Promise.reject(error);
  },
);

【讨论】：