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
でリクエストをキャンセル/中止する方法は?
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;
これは、ノードで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();
})
Axios-cancelと呼ばれる使用例の少ない本当に素晴らしいパッケージがあります。とても助かった。リンクは次のとおりです。 https://www.npmjs.com/package/axios-cancel