web-dev-qa-db-ja.com

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

Ajaxリクエストにはaxiosを使用し、UIのレンダリングにはreactJS + fluxを使用します。私のアプリにはサードサイドのタイムライン（reactJSコンポーネント）があります。タイムラインは、マウスのスクロールで管理できます。アプリは、スクロールイベントの後に実際のデータのajaxリクエストを送信します。サーバーでのリクエストの処理が次のスクロールイベントよりも遅くなる可能性があるという問題。この場合、ユーザーがさらにスクロールするため、アプリにはすでに非推奨となっているいくつかの（通常2〜3個の）リクエストを含めることができます。新しいデータのタイムラインを受信するたびに再描画が開始されるため、これは問題です。 （reactJS + fluxであるため）このため、ユーザーはタイムラインの移動を数回繰り返します。この問題を解決する最も簡単な方法は、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でリクエストをキャンセル/中止する方法は？

reactjsfluxreactjs-fluxes6-promiseaxios
23
Rajab Shakirov

現在、Axiosはリクエストのキャンセルをサポートしていません。詳細については この問題 をご覧ください。

更新： キャンセルサポート は、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

これは、ノードでpromiseを使用して行った方法です。最初の要求を行った後、ポーリングは停止します。

 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

Axios-cancelと呼ばれる使用例の少ない本当に素晴らしいパッケージがあります。とても助かった。リンクは次のとおりです。 https://www.npmjs.com/package/axios-cancel

2
Kornel