web-dev-qa-db-fra.com

Comment éviter d'envoyer plusieurs duplicataires AJAX Demandes dans Axios

Est-il possible d'accélérer automatiquement toutes les demandes d'aller à une liste particulière des points finaux utilisant AXIOS? Peut-être utiliser Axios Interceptor?

Actuellement, j'inspire l'action de l'utilisateur qui envoie la demande Axios, mais le problème est que je dois écrire cela partout où j'ai une action utilisateur qui entraîne une demande AJAX. Comme ça

  const throttledDismissNotification = throttle(dismissNotification, 1000)

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

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

Cela se traduit par beaucoup d'encombrement et je me demandais si cela pouvait être automatisé.

Quelque chose comme:

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

De toute évidence, c'est pseudocode mais vous avez l'idée.

javascriptreactjsaxiosredux-thunk
6
ManavM

J'ai un problème similaire, à travers mes recherches, il semble manquer d'une bonne solution. Tout ce que j'ai vu, c'était des solutions ad hoc donc j'ouvre un problème pour Axios, en espérant que quelqu'un peut répondre à ma question https://github.com/axios/axios/issues/2118

Je trouve également cet article Demandes Axios d'étranglement mais je n'ai pas essayé la solution qu'il a suggérée.

Et j'ai une discussion liée à cela ma mise en œuvre de la demande d'axios de débat a laissé la promesse en instance en attente pour toujours, est-ce une meilleure façon?

1
Qiulang

Je finis un, @Hackape Merci de votre réponse, le code est comme suit:

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
   }
 });
0
Jamter