如何避免在axios中发送多个重复的AJAX请求

是否可以使用 axios 自动限制发送到特定端点列表的所有请求？也许使用 axios 拦截器？

目前，我限制发送 axios 请求的用户操作，但问题是我必须在任何有导致某些 AJAX 请求的用户操作的地方编写此内容。像这样

  const throttledDismissNotification = throttle(dismissNotification, 1000)

  const dismiss = (event: any) => {
    throttledDismissNotification();
  };

  render() {
    return (
      <Button onClick={dismiss}>Dismiss Notification</Button>
    )
  }

这会导致很多混乱，我想知道这是否可以自动化。

就像是：

if(request.url in listOfEndpointsToThrottle && request.params in cacheOfPreviousRequestsToThisEndpoint) {
  StopRequest();
}

显然这是伪代码，但你明白了。

也许你可以尝试使用消除 https://github.com/axios/axios#cancellationaxios 提供的功能。

有了它，您可以确保没有任何两个（或更多，取决于您的实现）类似的请求处于待处理状态。

下面，您将找到一个简单的小示例，说明如何确保仅处理最新的请求。您可以对其进行一些调整，使其像请求池一样运行

    import axios, { CancelToken } from 'axios';

    const pendingRequests = {};

    const makeCancellable = (headers, requestId) => {
      if (!requestId) {
        return headers;
      }

      if (pendingRequests[requestId]) {
        // cancel an existing request
        pendingRequests[requestId].cancel();
      }
      const source = CancelToken.source();
      const newHeaders = {
        ...headers,
        cancelToken: source.token
      };
      pendingRequests[requestId] = source;
      return newHeaders;
    };

    const request = ({
      url,
      method = 'GET',
      headers,
      id
    }) => {
      const requestConfig = {
        url,
        method,
        headers: makeCancellable(headers || {}, id)
      };

      return axios.request(requestConfig)
        .then((res) => {
          delete pendingRequests[id];
          return ({ data: res.data });
        })
        .catch((error) => {
          delete pendingRequests[id];
          if (axios.isCancel(error)) {
             console.log(`A request to url ${url} was cancelled`); // cancelled
          } else {
             return handleReject(error);
          }
        });
    };

    export default request;