Ajax之同步请求和异步请求的区别?使用场景?

news/2024/7/19 15:28:46 标签: js, ajax

一、区别

①、异步:
在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。如下:

$.ajax({ 
     type:"POST",
     url:"Venue.aspx?act=init",
     dataType:"html",
     success:function(result){  //function1()
       f1();
       f2(); 
    }
     failure:function (result) { 
      alert('Failed'); 
     },
 }
 function2();

ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
在上例中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。

②、同步
在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。如下:

$.ajax({
    type:'post',
 url:"<c:url value='/device/org/' />"+val,
 data:{'orgId':val},
 success:function(data){//function(1)
 name=data.orgName;
 },
 dataType:"json",

 async:false
});

function(2);

当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
当把async设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。

二、使用场景
①、异步:发送一个请求,不需要等待返回,随时可以再发送下一个请求
②、同步:一步一步来操作,等待请求返回的数据,再执行下一步

三、总结:
异步: 多线程;无需等待
同步: 单线程,需要等待(容易阻塞进程,页面卡顿用户体验不好等)


http://www.niftyadmin.cn/n/1770316.html

相关文章

uni-app 中将改成异步请求同步化操作

在uni-app中&#xff0c;uni.request等许多接口都是异步的&#xff0c;有时候需要等接口返回数据后在执行下一步的操作&#xff0c;这个时候我们就用到了异步请求同步化操作。 解决方法&#xff1a; 总体思路就是使用async await&#xff0c;使异步问题同步化。需要 注意 的…

JSON.parse() 和 JSON.stringify()的用法

1、JSON.parse()用于将字符串解析成json对象&#xff1a;如下 2、JSON.stringify()用于将对象解析成字符串&#xff1a;如下&#xff1a;

vue+elementUI el-form 查询导致页面刷新

1、列表点击查询条件返回具体的内容&#xff0c;当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新&#xff0c;并没有去查询&#xff0c;很是费解&#xff0c;其他页面就没有这种情况&#xff0c;然而最后发现导致问题发生的原因竟是当表单只有一个文本框时&#xff…

vue中 this.$set

在我们使用vue进行开发的过程中&#xff0c;可能会遇到一种情况&#xff1a;当生成vue实例后&#xff0c;再次给数据赋值时&#xff0c;有时候并不会更新到视图上&#xff0c;如下所示&#xff1a; data () {return {list: [{ name: "zhangsan", id: "1" …

uni-app 微信小程序运行和打包

1、首先要下载安装微信开发者工具&#xff08;若已安装&#xff0c;则可以忽略&#xff09; 下载地址&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2、下载完成&#xff0c;然后安装。 3、在程序中配置微信开发者工具的安装位置 ①…

vue实现点击某个dom元素之外的方法

在项目开发中搜索按钮点击出现搜索框内容&#xff0c;这个时候点击搜索框以外的内容&#xff0c;搜索框隐藏掉&#xff0c;如下所示&#xff1a; 1、源码 2、实现点击其他区域搜索框内容隐藏&#xff0c;如下&#xff1a; document.addEventListener(click, (e) > {if (…

vue实现回到顶部功能

废话不多说&#xff0c;先来上代码 <template><div class"backtop-wrapper" v-if"btnFlag"><p click"backTop"><img src"/assets/img/backtop.png" alt""></p></div> </template&g…

vue 多行超出显示省略号 打包后-webkit-box-orient:vertical属性被移除导致失效

1、在vue项目中有时候会有固定多少行超出显示点点的需求&#xff0c;实现代码如下&#xff1a; .info{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}2、测试环境正常&#xff0c;但是build打包之后就…