如何解决多个ajax请求共用一个回调函数?
有这样一个场景,在一个页面上有多个列表,需要发多个请求去获取数据。所有的数据获取完之后需要去执行一个callback。但是这些接口本身是不会互相依赖的。没有办法把callback放到具体的某个请求里,因为请求数据是异步的,无法保证这个数据请求完之后其他接口也已经全部结束了。
如何保证在执行callback的时候所有的接口都已经结束?
1.将所有的接口嵌套,把下一个接口放在上一个接口的success回调里。代码如下
let getList = function (api,data,callback) { $.ajax({ url: api method: 'get', data: data, dataType: 'json', success: function (result) { callback() } }); }; getList(api,data,function(){ getList(api,data,function(){ getList(api,data,function() { dosomething() }) }) })
这样一来确实能够保证在执行dosomething()的时候我们需要的接口已经全部执行完毕。如果接口只有一两个还好,多了的话其实很不好看。所以可以用递归调用来优化下代码
let result = [] //apis 是接口数组 let getList = function(apis,callback,data) { $.ajax({ url: api[0] method: 'get', data: data, dataType: 'json', success: function (resp) { if (result.code === 0) { result.push(resp.data) api.shift() if(api.length) { getList(api,callback,data) }else{ callback(catData); } } } }); } getList(apis,callback,data)
我们上面说了 这些接口其实相互之间是不依赖的。这样串行虽然可以保证在所有接口执行完毕之后在执行回调。太费时间。那有没有办发让这些接口并行呢,比如说输入一个包含多个接口数组,输出一个包含返回这些数据的数组, 顺序和接口的数据要保持一致。
//同时发起多个请求 apis是接口数组 for(let i=0; i<apis.length;i++) { getList(apis[i],function(resp){ data[i] = resp }) } //利用 proxy 监听数据的写入 当数据长度和接口数量一致的时候 就认为所有接口的都调了。 let data = new Proxy({},{ set: function (target, key, value, receiver) { let result = Reflect.set(target, key, value, receiver); var tSize = Object.getOwnPropertyNames(target).length if(apisSize === tSize) { dosomething() }) } return result } })
Proxy 和 Reflect 参考网址
https://es6.ruanyifeng.com/#d...
https://es6.ruanyifeng.com/#d...
相关推荐
ChinaGuanq 2020-06-08
时光如瑾雨微凉 2020-07-19
ppsurcao 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07