zoukankan      html  css  js  c++  java
  • Js取消异步请求

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

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

      如果我们有多个通过axios发送的ajax请求,需要精准的取消掉指定的请求应该这么做呢?在上面的代码中有注释“cancelToken的值起标识作用,标识由source控制的、将要被取消的ajax操作

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

     综上三种方式

  • 相关阅读:
    oracle 之索引,同义词 ,关键词,视图 ,存储过程,函数,触发器
    基于TCP协议的socket通信
    支付宝支付 -即时到帐
    Hibernate延迟加载机制
    shiro 简单的身份验证 案例
    linux 试题
    程序员面试题精选100题(16)-O(logn)求Fibonacci数列[算法]
    九度OJ 1362 左旋转字符串(Move!Move!!Move!!!)【算法】
    九度OJ 1366 栈的压入、弹出序列 【数据结构】
    九度OJ 1387 斐波那契数列
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13931706.html
Copyright © 2011-2022 走看看