Question

如何在完成所有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来说是新的。建议请问？

Answer 1

在JavaScript中，当您调用一个scynchronous函数时，它通常会返回一个promise。正如我在代码中看到的，您的server.fetchData(request)调用会返回承诺，因为您使用的是承诺中典型的.done。

您可以将承诺存储在一个变量，像这样：

var promise1 = server.fetchData(request); 

再后来用它像这样：

promise1.done(function() { /* your code here */ }); 

内所做的承诺被满足时，将运行中的作用。履行（或拒绝）承诺的责任在异步方法内。即当请求结束并且响应已到达时，异步方法将履行承诺。而且，INT他的情况下，将通过提供给回调即

promise.done(function(response) { /* use response here */}); 

响应，您可以了解更多有关的承诺看jQuery docs on deferred（这是实现承诺的jQuery的方式）或谷歌搜索“JavaScript的承诺”兑现它。延迟具有promise的所有功能，以及用于履行（resolve）或拒绝（reject）该承诺的方法，可以返回调用延迟的.promise()方法。

例如一个asynchronouse方法couldlook这样的：

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(); 
}; 

的想法是，如果你调用这个方法，它会返回inmediately承诺。而且，当异步代码（如AJAX调用）结束时，返回它的方法将会保证为reject或resolve。发生这种情况时，将会调用附加到承诺的done或fail回调。

现在您已经了解了这些基础知识，jQuery提供了一种编写承诺的方法，即jQuery.when()。你可以这样写代码：如果三个承诺是fulfilled.If其中任何一个失败，它不会运行在所有

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。 A server.fetchData可能因为几个原因失败，并且您的代码应该处理这些问题。

还有另一个有趣的诺言库，like Q，它们在现代浏览器中本地支持：native promises。他们都分享了Promises/A+中定义的基本概念。