原生XHR
对于原生XHR对象来说,取消的ajax的关键是调用XHR对象的.abort()方法
var native = new XMLHttpRequest();
native.open("GET","https://api.github.com/");
native.send();
native.onreadystatechange=function(){
if(native.readyState==4&&native.status==200){
console.log(native.response);
}else{
console.log(native.status);
}
}
native.abort();
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('精确取消');