react hook axios loading 合并多次弹出

import { useState, useCallback, useMemo, useEffect } from "react";

import Axios from "axios";

const _axios = Axios.create({
  baseURL: host,
  timeout: 30000,
});

export const useLoadingHandler = () => {
  const [num, setNum] = useState(0);
  const inc = useCallback(() => setNum((i) => i + 1), [
    setCounter,
  ]); // add 
  const dec = useCallback(() => setNum((i) => i - 1), [
    setCounter,
  ]); // minus

  const interceptors = useMemo(
    () => ({
      request: (config: any) => (inc(), config),
      response: (response: any) => (dec(), response),
      error: (error: any) => (dec(), Promise.reject(error)),
    }),
    [inc, dec]
  ); 

  useEffect(() => {
    const req = _axios.interceptors.request.use(
      interceptors.request,
      interceptors.error
    );
    const res = _axios.interceptors.response.use(
      interceptors.response,
      interceptors.error
    );
    return () => {
      _axios.interceptors.request.eject(req);
      _axios.interceptors.response.eject(res);
    };
  }, [interceptors]);

  return [num > 0];
};