KIOSR
吃了码????

正在载入···

js如何取消异步请求[转]5月16日

本文总结了原生 XHR、jquery、axios 取消异步请求的方法。

XHR

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

var xhr = new XMLHttpRequest();
xhr.open("GET","https://api.github.com/");
xhr.send();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
        console.log(xhr.response);
    }else{
        console.log(xhr.status);
    }
}
xhr.abort();

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();

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('精确取消');

作者:指尖跳动
链接:https://www.jianshu.com/p/5c23a57659ea
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


none0 

js如何取消异步请求[转] Kiosr