AJAX中的串行与并行

简介: 我们来一起走进回调地狱,是谁的地狱呢?是AJAX的!

AJAX中的串行和并行

AJAX的串行

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

需求

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

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

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

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

AJAX的并行

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

代码示例

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的设计模式,专门用来有效管理异步编程,能解决异步编程中所产生的回调地狱。

目录
相关文章
|
5月前
|
存储 前端开发
PROMISE解决AJAX中的串行和并行
PROMISE解决AJAX中的串行和并行
49 0
|
5月前
|
设计模式 前端开发 JavaScript
AJAX中的串行与并行
AJAX中的串行与并行
46 0
|
存储 前端开发
Promise 解决AJAX中的串行并行
Promise 是个好东西!
102 0
|
11月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
78 0
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
120 0
|
5月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
5月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
46 0
|
5月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
70 0
|
5月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
5月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
83 0