如何在陣列回圈中運行ajax請求

好的，所以我正在創建一個網路應用程式，我遇到了一些問題

首先，我向 api 端點發出請求，這將回傳一個 json 回應，我將需要的內容添加到鍵值陣列中

然后我必須遍歷這個陣列中的所有專案，并且對于每個專案我需要向回傳一些 html 的第二個 api 端點發出請求

然后我需要將此 html 附加到頁面上的元素

我需要一個接一個地完成這個問題我遇到的問題是 .each() 回圈立即完成，而請求仍在后臺進行，這意味著在頁面上的 html 元素上附加了一些元素。

我怎樣才能讓回圈等到請求完成并附加html，然后再移動到陣列中的下一個專案

                    $("#middlebox").fadeTo(3000, 0, function() {
                
                    $("#middlebox").html(LOADING);
                    
                });
                
                $("#middlebox").fadeTo(3000, 1, function() {
                    
                    var API_URL = window.location.href   'api.php?action=channels&category=' $this.data("text") '&username=' $("#username").val() '&password=' $("#password").val();
                    var CHANNELS = {};
                    var API_CHANNELS = '<div >';

                    $.getJSON(API_URL).done( function( API_RESULT ) {
                        
                        $.each( API_RESULT.items, function( API_INDEX, API_ITEM ) {
                            
                            var API_ID = API_ITEM.stream_id;
                            var API_ICON = API_ITEM.stream_icon;
                            
                            CHANNELS[API_ID] = API_ICON;
                            
                        });
                        
                    }).then( function() {
                        
                        $.each( CHANNELS, function( CHANNEL_KEY, CHANNEL_VALUE ) {
                            
                            var EPG_URL = window.location.href   'api.php?action=epg&id=' CHANNEL_KEY '&username=' $("#username").val() '&password=' $("#password").val();
                            
                            API_CHANNELS  = '<div ><div ><img src="'   CHANNEL_VALUE   '" ></div>';
                            
                            $.ajax({
                                url:EPG_URL,
                                type: 'GET',
                                dataType: 'html',
                                success:function(content,code) {
                                    API_CHANNELS  = content;
                                }
                            });        
                            
                            API_CHANNELS  = '</div>';

                        });
                    
                        $("#middlebox").fadeTo(3000, 0, function() {
                            
                            API_CHANNELS  = '</div>';
                            
                            $("#middlebox").html(API_CHANNELS);
                            
                            $("#middlebox").fadeTo(3000, 1, function() {
                                
                            });
                            
                        });
                    
                    });
                    
                });

uj5u.com熱心網友回復：

Ajax 呼叫是異步的，因此您不能使用同步回圈來處理請求。

您可以使用它Promise.all來等待所有 ajax 請求，然后回圈處理回復。

Promise.all(CHANNELS.map(function( CHANNEL_KEY, CHANNEL_VALUE ) {
   var EPG_URL = window.location.href   'api.php?action=epg&id=' CHANNEL_KEY '&username=' $("#username").val() '&password=' $("#password").val();
   return $.ajax({
        URL: EPG_URL,
        type: 'GET',
        dataType: 'html'
    }).then(function(content) {
       return [CHANNEL_KEY, CHANNEL_VALUE, content];
    });
})).then(function(channels) {
     $.each(channels, function(CHANNEL_KEY, CHANNEL_VALUE, content) {
         API_CHANNELS  = '<div ><div ><img src="'   CHANNEL_VALUE   '" ></div>';
         API_CHANNELS  = content;
         API_CHANNELS  = '</div>';
     });
     $("#middlebox").fadeTo(3000, 0, function() {
       /* ... */
     });
});

標籤：javascript jQuery 数组 阿贾克斯 循环

上一篇：路口觀察者僅適用于第一個視頻

下一篇：如何呼叫可變的ajax