JS如何取消异步请求

XHR、jquery、axios取消异步请求的方法如下：

1.XHR

对于原生XHR对象来说，取消的ajax的关键是调用XHR对象的.abort()方法

    var xhr = new XMLHttpRequest(); // （1）创建异步对象
    xhr.open("GET","https://api.github.com/");// （2）设置请求的参数。包括：请求的方法、请求的url
    xhr.send();
    //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            console.log(xhr.response);
        }else{
            console.log(xhr.status);
        }
    }
    xhr.abort();

ref: blog.csdn.net/chaopingyao…

• 未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，readyState属性值为0。
• 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，readyState属性值为1。
• 发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，readyState属性值为2。
• 接收数据状态。服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，readyState属性值为3。
• 完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据

2. jQuery

jQuery为我们封装了ajax请求接口，在jQuery中，取消ajax请求也是通过调用.abort()方法，只不过操作的对象不再是原生XHR对象

    var jq = $.ajax({
        type:"get",
        url:"https://api.github.com/",
        dataType:"json",
        success:function(data){
            console.log(data);
        },
        error:function(err){
            console.log(err);
        }
    })
    jq.abort();

3. axios

如果我们经常使用vue等框架的话，就会使用axios发送ajax请求。在axios中取消ajax请求不同于上面两种形式，在axios中是通过axios.CancelToken.source()方法取消请求

    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();

    axios({
        method:"GET",
        url:"https://api.github.com/",
        cancelToken:source.token
        //cancelToken的值起标识作用，标识由source控制的、将要被取消的ajax操作
    }).then((res) => {
        console.log(res.data);
    }).catch((err) => {
        console.log(err);
    });

    source.cancel('Operation canceled by the user.');