108

私axiosは ajax リクエストに使用し、reactJS+fluxはレンダリング UI に使用します。私のアプリには、サード サイドのタイムライン (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?

4

10 に答える 10

37

useEffect フックの使用:

useEffect(() => {
  const ourRequest = Axios.CancelToken.source() // <-- 1st step

  const fetchPost = async () => {
    try {
      const response = await Axios.get(`endpointURL`, {
        cancelToken: ourRequest.token, // <-- 2nd step
      })
      console.log(response.data)
      setPost(response.data)
      setIsLoading(false)
    } catch (err) {
      console.log('There was a problem or request was cancelled.')
    }
  }
  fetchPost()

  return () => {
    ourRequest.cancel() // <-- 3rd step
  }
}, [])

注: POST リクエストの場合、第 3 引数として cancelToken を渡します

Axios.post(`endpointURL`, {data}, {
 cancelToken: ourRequest.token, // 2nd step
})
于 2020-05-04T08:55:19.207 に答える
24

通常、前の ajax リクエストをキャンセルし、そのインスタンスの新しい ajax リクエストが開始された場合にのみ、次のレスポンスを無視します。この目的のために、次の手順を実行します。

例: API からコメントを取得する:

// declare an ajax request's cancelToken (globally)
let ajaxRequest = null; 

function getComments() {

    // cancel  previous ajax if exists
    if (ajaxRequest ) {
        ajaxRequest.cancel(); 
    }

    // creates a new token for upcomming ajax (overwrite the previous one)
    ajaxRequest = axios.CancelToken.source();  

    return axios.get('/api/get-comments', { cancelToken: ajaxRequest.token }).then((response) => {
        console.log(response.data)
    }).catch(function(err) {
        if (axios.isCancel(err)) {
           console.log('Previous request canceled, new request is send', err.message);
        } else {
               // handle error
        }
    });
}
于 2019-12-12T07:01:54.120 に答える