ajax回调函数拼接url,如何解决多个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

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

}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值