如何避免在 axios 中发送多个重复的 AJAX 请求 [英] How to avoid sending multiple duplicate AJAX requests in axios

问题描述

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

Is it possible to automatically throttle all requests going to a particular list of endpoints using axios? Perhaps using axios interceptor?

目前我限制了发送 axios 请求的用户操作，但问题是我必须在任何地方都写这个，我有一个用户操作会导致一些 AJAX 请求.像这样

Currently I throttle the user action that sends the axios request, but the problem with that is that I have to write this everywhere I have a user action that results in some AJAX request. Like this

  const throttledDismissNotification = throttle(dismissNotification, 1000)

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

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

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

This results in a lot of clutter and I was wondering if this could be automated.

类似于:

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

显然这是伪代码，但你懂的.

Obviously this is pseudocode but you get the idea.

推荐答案

限制 axios 请求本身非常容易.真正令人头疼的是如何处理从无效请求返回的承诺.在处理从无效 axios 请求返回的承诺时，什么被视为理智行为?他们应该永远待定吗?

It's quite easy to throttle an axios request itself. The real headache is how to handle the promises that are returned from nullified requests. What is considered sane behavior when dealing with promises that are returned from a nullified axios request? Should they stay pending forever?

我没有看到这个问题的完美解决方案.但后来我找到了一个有点作弊的解决方案:

I don't see any perfect solution to this problem. But then I come to a solution that is kind of cheating:

如果我们不限制 axios 调用，而是限制实际的 XMLHttpRequest 会怎样?

What if we don't throttle the axios call, instead we throttle the actual XMLHttpRequest?

这让事情变得更容易，因为它避免了承诺问题，而且更容易实现.这个想法是为最近的请求实现缓存，如果新请求与最近的请求匹配，您只需从缓存中提取结果并跳过 XMLHttpRequest.

This makes things way easier, because it avoids the promise problem, and it's easier to implement. The idea is to implement a cache for recent requests, and if a new request matches a recent one, you just pull the result from cache and skip the XMLHttpRequest.

因为 axios 拦截器的工作方式，以下代码段可用于有条件地跳过某个 XHR 调用:

Because of the way axios interceptors work, the following snippet can be used to skip a certain XHR call conditionally:

// This should be the *last* request interceptor to add
axios.interceptors.request.use(function (config) {
  /* check the cache, if hit, then intentionally throw
   * this will cause the XHR call to be skipped
   * but the error is still handled by response interceptor
   * we can then recover from error to the cached response
   **/ 
  if (requestCache.isCached(config)) {
    const skipXHRError = new Error('skip')
    skipXHRError.isSkipXHR = true
    skipXHRError.request = config
    throw skipXHRError
  } else {
    /* if not cached yet
     * check if request should be throttled
     * then open up the cache to wait for a response
     **/
    if (requestCache.shouldThrottle(config)) {
      requestCache.waitForResponse(config)
    }
    return config;
  }
});

// This should be the *first* response interceptor to add
axios.interceptors.response.use(function (response) {
  requestCache.setCachedResponse(response.config, response)
  return response;
}, function (error) {
  /* recover from error back to normality
   * but this time we use an cached response result
   **/
  if (error.isSkipXHR) {
    return requestCache.getCachedResponse(error.request)
  }
  return Promise.reject(error);
});

这篇关于如何避免在 axios 中发送多个重复的 AJAX 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！