javascript - 用lodash去抖axios拦截器实例？

Question

我正在使用一个称为网络繁忙状态的状态道具来切换 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);
  },
);

标签： javascriptvue.jsaxiosdebounce

Answer 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);
  },
);