如何在axios中取消/中止ajax请求

Question

我对ajax请求使用axios，对呈现UI使用reactJS + flux。在我的应用程序中有第三方时间线(reactJS组件)。时间线可以由鼠标滚动来管理。应用程序在任何滚动事件之后发送对实际数据的ajax请求。在服务器上处理请求可能比下一个滚动事件慢的问题。在这种情况下，应用程序可以有几个(通常是2-3个)请求，这些请求已经被废弃了，因为用户滚动得更远。这是一个问题，因为每次收到新的数据时间线开始重绘。(因为它是reactJS +通量)因此，用户多次看到时间线的移动。解决这个问题的最简单方法是，它只是中止先前的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中取消/中止请求

Answer 1

使用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请求，将cancelToken作为第三个参数传递

Axios.post(`endpointURL`, {data}, {
 cancelToken: ourRequest.token, // 2nd step
})

Answer 2

通常，您希望取消先前的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
        }
    });
}

Answer 3

import React, { Component } from "react";
import axios from "axios";

const CancelToken = axios.CancelToken;

let cancel;

class Abc extends Component {
  componentDidMount() {
    this.Api();
  }

  Api() {
      // Cancel previous request
    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;