首页
学习
活动
专区
工具
TVP
发布

Ajax异步调用的顺序执行

上次有提到用ajax调用后端接口获取数据,但我最近遇到了一个问题。如果说通过一个接口获取一组列表,列表中的每一个项又要去通过另一个接口查询对应的值,再把第二次得到的值按照第一次获得的列表顺序展现出来,那么应该怎么做呢?

ajax的优点就在于它可以异步调用接口,当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。但这个特点也意味着如果我们有两个请求,第二个请求需要在第一个请求完成之后执行,这种默认是不行的。因为两个请求的执行是并行的。

我们来举个例子。假设ajax1是从后台请求一组列表,然后我们把列表中的每一项的值alert出来。一般的思路(也可能就我是这样想的,脑子转不过弯来)是在ajax的回调函数中做一个$.each()的遍历,然后在里面写alert。这种情况我这样写应该没什么问题

ajax请求success之后执行的这个函数是在获取到值之后进行的,所以这里alert(el.name)的顺序也是按照获取到的data中的顺序。那如果我们把alert这个操作换掉,我们希望根据每一个el.name去查询address怎么办?这时候我的想法是和上文一样。在alert(el.name)的同样位置调用一个函数,这个函数发起一个新的ajax请求,然后在新的ajax的请求成功回调函数中获取到address。这样做也是可行的。(如果有更好的方法请告诉我~)

但如果这样写存在问题。每一个name获取address是成功的,但是address的顺序不一定和name的顺序一致。按我们的想法,在第一个ajax遍历结果时我们是按照name的顺序发起第二个ajax请求的。假设name有3个,那么3个分别是按照A,B,C的顺序去请求的。但是B虽然在A之后发起,但是B不会等到A结束再开始。就像两个人跑步,A先开始跑,B在A出发后也开始跑,但是A和B哪个先到终点这是不一定的。如果你不在意A,B,C跑到终点的顺序,只是要这个结果,那请你关掉这篇文章= =。如果我们需要A,B,C到达顺序和出发顺序一致,那我们接着来想想怎么弄。

同步

第一个可能出现的想法是把ajax的async参数改为false。虽然ajax的优点是异步请求,但是也是可以同步的。但是这样在你请求的时候其他js是没办法执行的。对于用户来说就是卡死了。所以这个先放着。

排序

排序这个想法是我现在用的,但是总感觉不太好。既然没有办法控制A,B,C到达终点的顺序,那我们可以在他们到达之后,根据他们的出发顺序进行排序。首先在第一个ajax中我们要记录出发顺序,传递到调用的函数中,然后在第二个ajax的回调中调用排序。假设有一个ul,我们把每一个name放在li里面,然后对li进行排序。

虽然这个方式在结果上是正确的,做到了展现顺序和请求顺序一致,但是还不够简单。如果有A,B,C,D,E五个,在A请求完成后,A的li加入ul,然后对ul进行排序。接着假设是C完成,那么C的li加入ul,然后对ul进行排序。接着是B完成,那么B的li加入ul,然后对ul进行排序……以此类推。那么5个数据就要排序五次,n个数据排序n次。虽然在数据量小的情况下是没什么问题的,但是量大的话感觉还是有哪里不对。(我还是希望能只排一次,但是自己脑子转不过来,没想到= =,有没有大佬提点想法~)

其他想法

还有一种做法就是后端写接口的直接把两个一起给我们就好啦。干嘛要写两个借口呢~

还有看到什么complete回到函数之类的。这个是不管是success还是error都会执行的,相当于try,catch里面的finally。

还有看到用jquery的when什么的。这个我暂时还没用过,好像是jquery为了解决ajax的回调函数的一些内容。下一次等我试一试,再来和大家聊聊~

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171219G0EU0700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券