Использование обещаний для получения данных ajax

Question

Я пытался получить оставшуюся часть своего кода, чтобы дождаться запуска вызова ajax перед выполнением, поскольку сначала мне нужна информация в массиве. Я попробовал несколько подходов, но я не могу понять, почему они этого не сделают. Похоже, что использование обещаний может быть лучшей практикой в ​​такой ситуации. В настоящее время ajax по-прежнему работает после .done и final console.log (3).

Пожалуйста, смотрите код ниже:

$(document).ready(function(){ 
    var selectedChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
    var numberOfChannels = selectedChannels.length; 
    var onlineChannels = []; 
    var offlineChannels = []; 

function getChannels(){ 

for (var count = 0 ; count < numberOfChannels; count++) { 

    $.ajax({ 
    url: "https://wind-bow.hyperdev.space/twitch-api/streams/"+ selectedChannels[count], 
    type: "get", 
    dataType: "jsonp", 
    callback: "?", 
     data: { 
     }, 
     success: function(data) { 
      if (data.stream) { 
       var logo = data.stream.channel.logo 
       var twitchName = data.stream.channel.display_name 
       var details = data.stream.channel.status 
       var link = data.stream.channel.url 
       onlineChannels.push(twitchName); 
       console.log(onlineChannels); 
       console.log(1); 

       $(".display-area").append("<div class=\"result-box online\"><img src="+ logo +" alt=\"twitchName\" class=\"profile-img\"></img><div class=\"title\">"+ twitchName +"</div><div class=\"description\">"+ details +"</div>"); 

      } 
     }, 
    }).done(function(){ 

    }); 
} 

} 

/* should run after ajax and onlineChannels array has been populated */ 
function completeAjax() { 
    var promised = getChannels(); 
    var promisedComplete = $.when(promised); 
    promisedComplete.done(function(){ 
    console.log(onlineChannels); 
    console.log(2); 
    }); 
} 

completeAjax(); 

console.log(3) 
}); 

Answer 1

Вы можете отобразить Аякс звонков и возвращать обещания, а затем использовать $.when.apply, чтобы проверить, что весь Аякс вызовов завершили

$(document).ready(function() { 
    var selectedChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
    var onlineChannels = []; 
    var offlineChannels = []; 

    function getChannels() { 
     return $.map(selectedChannels, function(channel, index) { 
      return $.ajax({ 
       url  : "https://wind-bow.hyperdev.space/twitch-api/streams/" + channel, 
       type  : "GET", 
       dataType : "jsonp", 
       callback : "?", 
       data  : {} 
      }).done(function(data) { 
       if (data.stream) { 
        var logo  = data.stream.channel.logo; 
        var twitchName = data.stream.channel.display_name; 
        var details = data.stream.channel.status; 
        var link  = data.stream.channel.url; 

        onlineChannels.push(twitchName); 

        $(".display-area").append("<div class=\"result-box online\"><img src=" + logo + " alt=\"twitchName\" class=\"profile-img\"></img><div class=\"title\">" + twitchName + "</div><div class=\"description\">" + details + "</div>"); 
       } 
      }); 
     }); 
    } 

    $.when.apply($, getChannels()).done(function() { 
     // all done, onlineChannels populated 
    }); 

}); 

Answer 2

Вы можете использовать ваш счетчик обратит внимание на нуль, чтобы узнать, сколько звонков Ajax по-прежнему необходимо завершить:

for (var count = 0 ; count < numberOfChannels; count++) { 
    $.ajax({ 
     // ... 
     success: function(data) { 
      count--; // <!--------- decrease count 
      // ... 
     }, 
    }).done(function(){ 
     if (!count) { // <!--------- see if this was the last one finishing. 
      // All Ajax done. 
      // ...following tasks are initiated here. 
      // 
     } 
    }); 
} 

Чтобы понять, как это работает, важно осознать, что обратные вызовы и done не вызываются до завершения цикла и count достиг максимального значения. С этого момента count только уменьшается.