全栈工程师修炼之路

ajax中的async

2018-10-20  本文已影响1人  siberiawolf0307

今天写一个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()部分执行完毕。


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

上一篇下一篇

猜你喜欢

热点阅读