JavaScript中如何取消ajax請求

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請求，控制台中輸出如下：