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

Question

是否可以使用 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();
}

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

Answer 1

或许您可以尝试使用 Cancellation axios 提供的功能。

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

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

    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;