前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AJAX中的串行与并行

AJAX中的串行与并行

作者头像
HelloWorldZ
发布2024-03-20 18:38:48
1040
发布2024-03-20 18:38:48
举报
文章被收录于专栏:前端开发

AJAX的串行

串行特点:只有上一个请求成功,才能执行第下一个,串行中,上一个请求的数据会做下一次请求的依赖。

需求

希望得到日门的语文成绩全世界排名,首先第一次请求获得到他的个人基本信息,然后第二次请求,获得他的全部分数列表,最后的第三次请求,获取到日门的语文成绩排名。

如上是基于Jquery的三次请求,可以看到下一个请求里的数据(scoreId)是基于上一个请求的,若将上一个请求改为同步的话,那么就会执行完后,再进行下一个请求,这便是 AJAX 的串行,其实更通俗来讲就是完成上一个,我们才可以执行下面的操作,也即是一些请求进行并排发出,用异步的话,是不能保证上一个完成,下一个再开始。

但是实际项目中我们是很少用AJAX同步的,因此对上图代码做如下修改

如上代码修改后,多个回调嵌套在一起,我们可以看到,代码不易管理,数据逻辑不易处理,将上面的串行代码修改后,就形成了著名的回调地狱。

AJAX的并行

并行特点:多个请求可以同时发送,但是需要等到所有请求都成功才会做一件事。多个请求之间没有相互依赖。

代码示例

代码语言:javascript
复制
let chi = 100,eng = 12, math = 100;
let chipaiming,engpaiming,mathpaiming;
let count = 0; // 计数器 累计 3 次后就执行一件事
function flag() {
   if(count >= 3){
      // 处理自己要做的事情
   }
}
/* 发送 3 次请求 */
$.ajax({
   url: 'paiming?chi=' + chi,
   success: result => {
      chipaiming = result
      count++
      flag()
   }
})
$.ajax({
   url: 'paiming?eng=' + eng,
   success: result => {
      engpaiming = result
      count++
      flag()
   }
})
$.ajax({
   url: 'paiming?math=' + math,
   success: result => {
      mathpaiming = result
      count++
      flag()
   }
})

以上就是AJAX的并行

通过对于AJAX串行和并行的示例,我们发现,串行导致的回调地狱,并行时设置的计数器,其实是不方便的,但是这串行和并行的设计思路和模式是对实际项目处理复杂逻辑有很大的帮助的,因此引入了Promise的设计模式,专门用来有效管理异步编程,能解决异步编程中所产生的回调地狱。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • AJAX的串行
  • AJAX的并行
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档