javascript - 如何确保在 3 个异步函数完全完成后执行同步函数

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 中，当您调用同步函数时，它通常会返回一个 promise 。正如我在您的代码中看到的那样，您的 server.fetchData(request) 调用会返回 promise ，因为您使用了 .done，这在 promise 中很典型。

您可以将 promise 存储在变量中，如下所示:

var promise1 = server.fetchData(request);

然后像这样使用它:

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

done 中的函数将在 promise 完成时运行。履行(或拒绝) promise 的责任在异步方法中。 IE。当请求完成并且响应已经到达时，异步方法将履行 promise 。并且，在他的情况下，将通过提供对回调的响应来实现它，即

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

您可以在 jQuery docs on deferred 中了解更多关于 promise 的信息(这是实现 promise 的 jQuery 方式)或谷歌搜索“javascript promises”。 deferred 具有 promise 的所有功能，以及实现 (resolve) 或拒绝 (reject) promise 的方法，它可以调用 deferred 的 .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();
 };

这个想法是，如果你调用这个方法，它会立即返回一个 promise 。而且，当异步代码(如 AJAX 调用)完成时，返回它的方法将拒绝或解决该 promise 。当发生这种情况时，将调用附加到 promise 的 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
  })

done 部分只有在三个 promise 都满足的情况下才会运行。如果其中任何一个失败，它根本不会运行。

您应该始终处理您的 promise 的.fail。 server.fetchData 可能由于多种原因而失败，您的代码应该处理这些问题。

还有另一个有趣的 promise 库，like Q , 它们在现代浏览器中得到原生支持:native promises .它们都共享基本概念，如 Promises/A+ 中所定义。 .