☰

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

tag-icon • tag-icon reactjs flux reactjs-flux es6-promise axios
axiosでajaxリクエストをキャンセル/中止する方法 質問する

私はaxiosajax リクエストに を使用し、reactJS+ をfluxUI のレンダリングに使用します。私のアプリにはサード サイド タイムライン (reactJS コンポーネント) があります。タイムラインはマウスのスクロールによって管理できます。アプリは、スクロール イベントの後に実際のデータを求める ajax リクエストを送信します。サーバーでのリクエストの処理が次のスクロール イベントよりも遅くなる可能性があるという問題があります。この場合、ユーザーがさらにスクロールするため、アプリにはすでに非推奨となっているリクエストが複数 (通常は 2 ～ 3 件) 存在する可能性があります。新しいデータを受信するたびにタイムラインが再描画を開始するため、問題となります (reactJS + flux であるため)。このため、ユーザーはタイムラインが何度も前後に移動するのを目にすることになります。この問題を解決する最も簡単な方法は、 のように、前の ajax リクエストを中止することですjQuery。例:

    $(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?

ベストアンサー1

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

アップデート： キャンセルサポート axios v0.15 で追加されました。

編集: axios キャンセル トークン API は、撤回されたキャンセル可能な Promise 提案に基づいています。

2022年アップデート: v0.22.0からAxiosはAbortControllerをサポートしていますフェッチ API の方法でリクエストをキャンセルするには:

例：

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

おすすめ記事