comment annuler ou interrompre une requête ajax dans axios

- Je utiliser axios pour les requêtes ajax et reactJS + flux pour le rendu de l'INTERFACE utilisateur. Dans mon application il y a une troisième côté scénario (reactJS composant). Montage peuvent être gérés par la souris de défilement. Application envoie une requête ajax pour les données réelles après tout événement scroll. Problème de traitement de la requête au serveur peut être plus lente que l'un à côté de défilement de l'événement. Dans ce cas, l'application peut avoir plusieurs (2 ou 3 en général) les demandes qui est déjà obsolète parce que l'utilisateur fait défiler plus loin. c'est un problème, car à chaque fois, à la réception de nouvelles données commence redessiner. (Parce que c'est reactJS + flux) de ce fait, l'utilisateur voit le mouvement de la chronologie d'avant en arrière plusieurs fois. La façon la plus simple pour résoudre ce problème, il tout abandonner précédente requête ajax 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 ou abandonner les demandes en axios?

Double Possible de reactJS comment faire pour arrêter d'écouter les requêtes ajax
Votre lien a aidé à me résoudre ce problème, mais je me demande encore aujourd'hui comment annuler une demande, au lieu d'arrêter d'écouter...

OriginalL'auteur Rajab Shakirov | 2016-07-12

  1. 16

    Axios ne prend pas en charge l'annulation de demandes pour le moment. Veuillez voir ce problème pour plus de détails.

    Mise à JOUR: Annulation de soutien a été ajouté dans axios v0.15.

    pourriez-vous mettre à jour de la réponse après fusion PR?
    Mise à jour
    Veuillez inclure un exemple minimal dans le cas où la ressource liée descend!
    hahha effacée...
    si vous faites cela, il ne peut pas exécuter plus encore

    OriginalL'auteur Nick Uraltsev

  2. 1

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

    OriginalL'auteur Kornel

  3. 1

    C'est la façon dont je l'ai fait à l'aide de promesses dans le nœud. Pollings arrêter après avoir fait 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();               
              })

    OriginalL'auteur Legolas

  4. 0
    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;
    S'il vous plaît essayer d'expliquer ou d'ajouter des commentaires pourquoi vous pensez que ce code permettrait de résoudre le problème
    Bonjour @AliKanat , jem personally use this many time and its donner un bon résultat merci une fois de la mettre en œuvre avec votre code,alors si vous avez des requêtes, veuillez mentionne dans les commentaires 🙂

    OriginalL'auteur vijay sadhu