Comment éviter d'envoyer plusieurs requêtes AJAX en double dans axios

Vous pourriez peut-être essayer d'utiliser la fonction d' annulation fournie par axios.

Avec lui, vous pouvez vous assurer que vous n'avez pas deux demandes similaires (ou plus, selon votre implémentation) dans un état en attente.

Ci-dessous, vous trouverez un petit exemple simplifié pour vous assurer que seule la dernière demande est traitée. Vous pouvez l'ajuster un peu pour le faire fonctionner comme un pool de requêtes

    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;

J'ai un problème similaire, grâce à mes recherches, il semble qu'il manque une bonne solution. Tout ce que j'ai vu, ce sont des solutions ad hoc, alors j'ouvre un problème pour axios, en espérant que quelqu'un puisse répondre à ma question https://github.com/axios/axios/issues/2118

Je trouve aussi cet article sur la limitation des requêtes Axios mais je n'ai pas essayé la solution qu'il suggérait.

Et j'ai une discussion à ce sujet. Ma mise en œuvre de la demande de debounce axios a laissé la promesse en attente pour toujours, y a-t-il un meilleur moyen?

Il est assez facile d'étrangler une demande axios elle-même. Le vrai casse-tête est de savoir comment gérer les promesses renvoyées par les demandes annulées. Qu'est-ce qui est considéré comme un comportement sain lorsqu'il s'agit de promesses renvoyées par une requête axios annulée? Devraient-ils rester en suspens pour toujours?

Je ne vois aucune solution parfaite à ce problème. Mais ensuite, j'arrive à une solution qui est une sorte de triche:

Que faire si nous ne limitons pas l'appel axios, mais plutôt la XMLHttpRequest réelle?

Cela rend les choses beaucoup plus faciles, car cela évite le problème des promesses et c'est plus facile à mettre en œuvre. L'idée est d'implémenter un cache pour les requêtes récentes, et si une nouvelle requête correspond à une récente, il vous suffit d'extraire le résultat du cache et d'ignorer la XMLHttpRequest.

En raison du fonctionnement des intercepteurs axios , l'extrait de code suivant peut être utilisé pour ignorer un certain appel XHR de manière conditionnelle:

// 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);
});

J'en termine un, @hackape merci pour votre réponse, le code est le suivant:

const pendings = {}
const caches = {}
const cacheUtils = {
   getUniqueUrl: function (config) {

     // you can set the rule based on your own requirement
     return config.url + '&' + config.method
   },
   isCached: function (config) {
     let uniqueUrl = this.getUniqueUrl(config)
     return caches[uniqueUrl] !== undefined
   },
   isPending: function (config) {
     let uniqueUrl = this.getUniqueUrl(config)
     if (!pendings[uniqueUrl]) {
       pendings[uniqueUrl] = [config]
       return false
     } else {
       console.log(`cache url: ${uniqueUrl}`)
       pendings[uniqueUrl].push(config)
       return true
     }
   },
   setCachedResponse: function (config, response) {
     let uniqueUrl = this.getUniqueUrl(config)
     caches[uniqueUrl] = response
     if (pendings[uniqueUrl]) {
       pendings[uniqueUrl].forEach(configItem => {
         configItem.isFinished = true
       })
     }
   },
   getError: function(config) {
     const skipXHRError = new Error('skip')
     skipXHRError.isSkipXHR = true
     skipXHRError.requestConfig = config
     return skipXHRError
   },
   getCachedResponse: function (config) {
     let uniqueUrl = this.getUniqueUrl(config)
     return caches[uniqueUrl]
   }
 }
 // This should be the *last* request interceptor to add
 axios.interceptors.request.use(function (config) {

    // to avoid careless bug, only the request that explicitly declares *canCache* parameter can use cache
   if (config.canCache) {

     if (cacheUtils.isCached(config)) {
       let error = cacheUtils.getError(config)
       throw error
     }
     if (cacheUtils.isPending(config)) {
       return new Promise((resolve, reject) => {
         let interval = setInterval(() => {
           if(config.isFinished) {
             clearInterval(interval)
             let error = cacheUtils.getError(config)
             reject(error)
           }
         }, 200)
       });
     } else {

       // the head of cacheable requests queue, get the response by http request 
       return config
     }
   } else {
     return config
   }
 });

Il existe des axios extensions très pratiques https://www.npmjs.com/package/axios-extensions qui peuvent ralentir, mettre en cache les requêtes et renvoyer automatiquement celles qui ont échoué.