Axisでajaxリクエストをキャンセル/中止する方法

Question

私はAjaxリクエストにaxios、レンダリングUIにはreactJS + fluxを使用します。私のアプリでは、第3のサイドタイムライン（reactJSコンポーネント）があります。マウスのスクロールでタイムラインを管理できます。 Appは、スクロールイベントの後に実際のデータに対してajaxリクエストを送信します。サーバーでの要求の処理が次のスクロールイベントよりも遅くなる可能性がある問題。この場合、アプリはユーザーがさらにスクロールするため、既に非推奨となっている複数の（通常は2〜3回）リクエストを持つことができます。新しいデータのタイムラインを受信するたびに再描画が開始されるため、問題になります。 （これは反応するためです）+このため、ユーザーはタイムラインの動きを何度も前後に見ています。この問題を解決する最も簡単な方法は、それはちょうどjQueryのように前のajaxリクエストを中止します。たとえば、次のように

$(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); 
); 

がどのようにaxiosでリクエストを中断/中止するには？

Answer 1

Axiosは現在のところリクエストのキャンセルをサポートしていません。詳細は this issueをご覧ください。

更新日：Cancellation supportが腋窩v0.15に追加されました。

Answer 2

axios-cancelという使い方の例はほとんどありません。 私はそれが非常に有用であることを発見しました。 ここにリンクがあります：https://www.npmjs.com/package/axios-cancel

Answer 3

これは私がノードで約束を使って行った方法です。ポーリングは、最初のリクエストを行った後に停止します。

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