JavaScript中如何取消ajax请求

刘亦枫

发布于 2020-03-19 17:31:00

3.1K0

发布于 2020-03-19 17:31:00

JS

xmlHttp.open("POST","theUrl",true);
xmlHttp.onreadystatechange=function(){
  ...//得到响应之后的操作
}
xmlHttp.send();
//设置8秒钟后检查xmlHttp对象所发送的数据是否得到响应.
setTimeout("CheckRequest()","8000");
function CheckRequest(){
  //为4时代表请求完成了  
  if(xmlHttp.readyState!=4){
    alert('响应超时');
    //关闭请求
    xmlHttp.close();
  }
}

jQuery

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

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

取消ajax之后，jQuery封装的ajax对象就会执行error对应的函数

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.');

这样子，在控制台中的输出就是：

但如果我们有多个通过axios发送的ajax请求，需要精准的取消掉指定的请求应该这么做呢？在上面的代码中有注释“cancelToken的值起标识作用，标识由source控制的、将要被取消的ajax操作”，下面的例子会更加清楚的展示cancelToken的作用。

var CancelToken = axios.CancelToken;

var source = CancelToken.source();
axios({
    method:"GET",
    url:"https://api.github.com/",
    cancelToken:source.token
}).then((res) => {
    console.log(res.data);
}).catch((err) => {
    console.log(err);
});

var custom = CancelToken.source();
axios({
    method:"GET",
    url:"https://api.github.com/",
    cancelToken:custom.token
}).then((res)=>{
    console.log(res.data);
}).catch((err)=>{
    console.log(err);
});

source.cancel('Operation canceled by the user.');
custom.cancel('精确取消');

这段代码在上一段代码的基础上添加了一个ajax请求，控制台中输出如下：