web-dev-qa-db-fra.com

comment annuler / annuler la demande ajax dans axios

J'utilise axios pour les requêtes ajax et reactJS + flux pour l'interface utilisateur de rendu. Dans mon application, il y a une chronologie de troisième côté (composant reactJS). La timeline peut être gérée par le défilement de la souris. L'application envoie une demande ajax pour les données réelles après un événement de défilement. Problème que le traitement de la demande sur le serveur peut être plus lent que le prochain événement de défilement. Dans ce cas, l'application peut avoir plusieurs demandes (2-3 généralement) qui sont déjà obsolètes car l'utilisateur continue à faire défiler l'écran. c'est un problème parce que chaque fois à la réception de nouvelles données, la chronologie commence à se redessiner. (Parce qu’il réagit + flux) De ce fait, l’utilisateur voit plusieurs fois le mouvement de la timeline. Le moyen le plus simple de résoudre ce problème consiste à abandonner la requête ajax précédente comme dans jQuery. Par exemple:

    $(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

Comment annuler/abandonner des demandes dans axios?

reactjsfluxreactjs-fluxes6-promiseaxios
23
Rajab Shakirov

Axios ne prend pas en charge l’annulation des demandes pour le moment. S'il vous plaît voir ce numéro pour plus de détails.

UPDATE: Annulation support a été ajouté dans axios v0.15.

26
Nick Uraltsev
import React, { Component } from 'react';
import axios from 'axios';

const CancelToken = axios.CancelToken;

let cancel;

class abc extends Component {

componentDidMount() {

    this.Api();

}

Api(){
    if (cancel !== undefined) {
        cancel();
    }
    axios.post(URL,reqBody,{cancelToken: new CancelToken(function executor(c) 
        {
            cancel = c;
        })
    }).then((response) => {
        //responce Body
    }).catch((error) => {
        if (axios.isCancel(error)) {
            console.log('post Request canceled');
        }
    });
}

render() {
    return <h2>cancel Axios Request</h2>;
}
}

export default abc;
2
vijay sadhu

Voici comment je l'ai fait en utilisant des promesses dans le noeud. Les scrutations s’arrêtent après la première demande.

 var axios = require('axios');
    var CancelToken = axios.CancelToken;
    var cancel;
    axios.get('www.url.com',
                      {
                        cancelToken: new CancelToken(
                            function executor(c) {
                                cancel = c;
                             })
                      }
            ).then((response) =>{            
                cancel();               
              })
2
Legolas

Il existe vraiment un package Nice avec quelques exemples d’utilisation appelés axios-cancel. Je l'ai trouvé très utile. Voici le lien: https://www.npmjs.com/package/axios-cancel

2
Kornel