如何确保在所有 3 个异步请求完成后执行 self.loadable()。 ???
var imghtml = "<span class='pull-right' style='padding-right:25px'><img alt='track' src='app/images/Icons/Track.png'><img alt='expand' src='app/images/Icons/Expand.png'></span>";
var request1 = {};
if(self.serviceid != null)
request1.healthIssue = {id:self.serviceid};
request1.location = {id:self.locationid};
request1.time = {id:header.defaultduration().value};
request1.hospital = {id:header.defaulthospital().value};
request1.query = {groupName:'speciality', dimension:'VISITS', viewBy:'MARKETSHARE'};
console.log(request1);
server.fetchData(request1).done(function(data){
console.log('The specialty marketshares are : ');
console.log(data);
if(data.length != 0) {
$.each(data, function(index,mshare){
var count = 0;
$.each(self.marketsharetable(), function(index, tobj) {
if(tobj.specialty == mshare.name){
tobj.marketshare(mshare.value);
count++;
return false;
}
});
if(count == 0){
var obj = {};
obj.specialty = mshare.name;
obj.marketshare = ko.observable(mshare.value);
obj.rank = ko.observable();
obj.volume = ko.observable();
obj.btns = imghtml;
self.marketsharetable.push(obj);
}
});
console.log(self.marketsharetable());
}
else{
console.log("Clearing the table");
$('#msharetable').DataTable({
"paging": false,
"info": false,
"destroy": true,
"data": self.marketsharetable(),
"language": {
"emptyTable": "No data available"
}
});
}
});
var request2 = {};
if(self.serviceid != null)
request2.healthIssue = {id:self.serviceid};
request2.location = {id:self.locationid};
request2.time = {id:header.defaultduration().value};
request2.hospital = {id:header.defaulthospital().value};
request2.query = {groupName:'speciality', dimension:'VISITS', viewBy:'RANK'};
server.fetchData(request2).done(function(data){
console.log('The specialty ranks are : ');
console.log(data);
$.each(data, function(index,mrank){
var count = 0;
$.each(self.marketsharetable(), function(index, tobj) {
if(tobj.specialty == mrank.name){
tobj.rank(mrank.value);
count++;
return false;
}
});
if(count == 0){
var obj = {};
obj.specialty = mrank.name;
obj.marketshare = ko.observable();
obj.rank = ko.observable(mrank.value);
obj.volume = ko.observable();
obj.btns = imghtml;
self.marketsharetable.push(obj);
}
});
console.log(self.marketsharetable());
});
var request3 = {};
if(self.serviceid != null)
request3.healthIssue = {id:self.serviceid};
request3.location = {id:self.locationid};
request3.time = {id:header.defaultduration().value};
request3.hospital = {id:header.defaulthospital().value};
request3.query = {groupName:'speciality', dimension:'VISITS', viewBy:'COUNT'};
server.fetchData(request3).done(function(data){
console.log('The specialty input volumes are : ');
console.log(data);
$.each(data, function(index,mvolume){
var count = 0;
$.each(self.marketsharetable(), function(index, tobj) {
if(tobj.specialty == mvolume.name){
tobj.volume(mvolume.value);
count++;
return false;
}
});
if(count == 0){
var obj = {};
obj.specialty = mvolume.name;
obj.marketshare = ko.observable();
obj.rank = ko.observable();
obj.volume = ko.observable(mvolume.value);
obj.btns = imghtml;
self.marketsharetable.push(obj);
}
});
console.log(self.marketsharetable());
$('#msharetable').DataTable({
"paging": false,
"info": false,
"destroy": true,
"data": self.marketsharetable(),
"language": {
"emptyTable": "No data available"
},
"deferRender": true,
"columns": [
{ "data": "specialty" },
{ "data": "marketshare" },
{ "data": "rank" },
{ "data": "volume" },
{ "data": "btns" }
]
});
});
self.loadtable();
请帮助如何在对服务器进行 3 次异步调用后执行同步功能。我是高级JavaScript的新手。建议请?
在 JavaScript 中,当你调用一个 scynchronous 函数时,它通常会返回一个 promise。正如我在您的代码中看到的那样,您的server.fetchData(request)
调用返回承诺,因为您使用了 promise 中典型的.done
。
您可以将承诺存储在变量中,如下所示:
var promise1 = server.fetchData(request);
然后像这样稍后使用它:
promise1.done(function() { /* your code here */ });
完成中的函数将在承诺实现时运行。履行(或拒绝)承诺的责任在异步方法内部。即,当请求完成并且响应已到达时,异步方法将实现承诺。并且,在他的案例中,将通过提供对回调的响应来实现它,即
promise.done(function(response) { /* use response here */});
你可以了解更多关于承诺的信息,看看jQuery文档上的延期(这是jQuery实现承诺的方式)或谷歌搜索"javascript承诺"。延期具有promise
的所有功能,以及实现(resolve
)或拒绝(reject
)承诺的方法,可以调用延期的.promise()
方法返回。
例如,异步方法可能如下所示:
function asynch() {
var deferred = $.Deferred();
// do something asynchronous, and get some data
// if the result is ok, fulfill the promise
deferred.resolve(data);
// if it failed, reject it
deferred.reject(reason);
return deferred.promise();
};
这个想法是,如果你调用此方法,它将立即返回一个承诺。而且,当异步代码(如 AJAX 调用)完成时,返回它的方法将reject
或resolve
该承诺。发生这种情况时,将调用附加到承诺的done
或fail
回调。
现在您已经了解了这些基础知识,jQuery 提供了一种编写 promise 的方法,即 jQuery.when()。你可以像这样编写代码:
var promise1 = server.fetchData(request1);
var promise2 = server.fetchData(request2);
var promise3 = server.fetchData(request3);
$.when(promise1, promise2, promise3)
.done(function(result1, result2, result3) {
// use the results of the three server.fetchData here
})
完成的部分只有在三个承诺得到履行时才会运行。如果其中任何一个失败,它根本不会运行。
你应该始终处理你承诺.fail
。server.fetchData
可能会由于多种原因而失败,您的代码应处理这些问题。
还有另一个有趣的 promise 库,比如 Q,它们在现代浏览器中是原生支持的:原生 promises。它们都共享 Promises/A+ 中定义的基本概念。