最終的なコールバック、信頼できない注文を伴う多くのリクエスト？

Question

多くのリモートリソースがロードされ、最終的なコールバックを実行します（これらの要求から取得データに基づいてDOMをレンダリングする場合など）。

はここで機能だ：

var ResourceLoader = function() { 

    this.requests = new Array(); 
    this.FinalCallback; 

    this.Add = function (request) { 
     this.requests.push(request); 
    }; 

    this.Execute = function() { 

     for (var x = 0; x < this.requests.length ; x++) { 

      var success = this.requests[x].success; 

      //if this is the last of the requests... 
      if (x == (this.requests.length - 1) && this.FinalCallback) { 

       $.when($.ajax({ 
          url: this.requests[x].url, 
          dataType: 'json', 
          error: this.requests[x].error, 
          method: 'GET' 
         }).done(success)).then(this.FinalCallback); 
      } 
      else { 

       $.ajax({ 
        url: this.requests[x].url, 
        dataType: 'json', 
        error: this.requests[x].error, 
        method: 'GET' 
       }).done(success);     
      } 

     } 

    }; 
}; 

そして、ここで私はそれを使用する方法は次のとおりです。

var apiUrl = Utilities.Api.GetWebApiUrl(); 
var loader = new Utilities.ResourceLoader(); 

loader.Add({ 
    url: apiUrl + 'regions/get', 
    success: function (results) { 
     Filters.Regions = results; 
    } 
}); 

loader.Add({ 
    url: apiUrl + 'currentfactors/get/83167', 
    success: function (results) { 
     Filters.NbrEmployees = results; 
    } 
}); 

loader.Add({ 
    url: apiUrl + 'currentfactors/get/83095', 
    success: function (results) { 
     Filters.Industries = results; 
    } 
}); 


loader.FinalCallback = RenderBody; 
loader.Execute(); 

function RenderBody() { 
    console.log('render...'); 
} 

を明らかに、私はRenderBodyが最後に実行されることを期待しています。しかし、それは起こっていることではありません。皮肉なのは前にそのようなことをやったことを覚えているのですが、コードを失ってしまったのです...私は脳の部分を持っているようです。

Answer 1

- ここPromise.all

this.Execute = function() { 
    Promise.all(this.requests.map(function(request) { 
    return $.ajax({ 
     url: request.url, 
     dataType: 'json', 
     error: request.error, 
     method: 'GET' 
    }).done(request.success); 
    })).then(this.FinalCallback); 
}; 

か...

this.Execute = function() { 
    $.when.apply($, this.requests.map(function(request) { 
    return $.ajax({ 
     url: request.url, 
     dataType: 'json', 
     error: request.error, 
     method: 'GET' 
    }).done(request.success); 
    })).then(this.FinalCallback); 
}; 

Answer 2

Es6 Promiseには、リソースグループのロードが特定の目的で抽象化されていない限り、問題を解決する必要はありません。各リソース要求に対してPromiseオブジェクトを設定し、コンストラクタを使用してXHRの解決コールバックと拒否コールバックを適切に割り当てます。コレクションはの結果（Iterableになります）を保ちます。最終製品はPromise.all(collectionOfPromises).then(finalCallback)です。あなたはpromiseタグが付いてきたように