ajax中的async

作者: siberiawolf0307 | 来源:发表于2018-10-20 14:54 被阅读1次

    今天写一个ajax的时候,需要等待ajax处理结果。我第一时间想到的是es6的新语法,因为以前看过代码,但是没在项目中用过,看了一会儿,感觉自己走麻烦了。其实直接用ajax的async属性就行。因为一般情况下这个属性不用设置,就给忽略了。

    async值为true (异步)

    这个属性一般默认是true,甚至可以不写这个属性,在一般的框架中都会有默认值。
    当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

    $.ajax({  
         type: 'POST', 
         url: 'getUserName', 
         dataType: 'json', 
         success: function(result){    // function1()
           console.log('do something'); 
        },
        error: function (xhr, type) {  
          console.log(xhr);
        }
     });
    
     function2();   // function2()
    

    在上例中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。

    async值为false (同步)

    将这个属性手动设置为false。
    当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。

    $.ajax({  
         type: 'POST', 
         url: 'getUserName', 
         dataType: 'json', 
         async: false,
         success: function(result){    // function1()
           console.log('do something'); 
        },
        error: function (xhr, type) {  
          console.log(xhr);
        }
     });
    
     function2();   // function2()
    

    当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。


    总结:简单的东西,长时间不使用,冷不丁一下子也是会忘记的。

    相关文章

      网友评论

        本文标题:ajax中的async

        本文链接:https://www.haomeiwen.com/subject/xncmzftx.html