共计 1367 个字符,预计需要花费 4 分钟才能阅读完成。
有这样一个场景,在一个页面上有多个列表,需要发多个请求去获取数据。所有的数据获取完之后需要去执行一个 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…
正文完
发表至: javascript
2019-09-02