时间戳

首页 > 解决方案 > 如何避免在 axios 中发送多个重复的 AJAX 请求

javascript - 如何避免在 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();
}

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

标签： javascriptreactjsaxiosredux-thunk

解决方案

也许您可以尝试使用 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;

推荐阅读