API調用循環

我正在使用Twitch的API（由於CORS的替代鏈接）。運行時，html會回到空白狀態。是因爲回調，我能做些什麼來獲取數據？我可以確認該鏈接的工作原理，並嘗試通過它沒有運氣。API調用循環

let usernames = ['freecodecamp']; 
let api = ''; 
let html = ''; 

    for(let i = 0; i < usernames.length; i++) { 
    api = 'https://wind-bow.gomix.me/twitch-api/streams/' + usernames[i] + '?callback=?'; 
    $.getJSON(api, function(data) { 
     let online = data.stream == null; 
     if(online) { 
     html += usernames[i] + '\nStatus: Offline'; 
     } 
     else { 
     html += usernames[i] + '\nStatus: Online'; 
     } 
    }); 
    } 
    if(html != '') { 
    $('#data_display').html('<h1>' + html + '</h1>'); 
    }

來源

2017-06-21 Weston

首先擺脫'+'？callback =？''。另外，不妨使用'glitch.me'而不是'gomix.me'。（後者重定向到前者。）之後，粘貼更新的代碼，並告訴我們是否仍有問題。 – smarx

'$ .getJSON'是一個異步進程。當然你的'html'在你放入'＃data_display'時是空的。然後，避免xhr-ing在循環中 – choz

把你的最後追加的HTML塊的getJSON中：

$.getJSON(api, function(data) { 
    let online = data.stream == null; 
    if(online) { 
    html = usernames[i] + '\nStatus: Offline'; 
    } 
    else { 
    html = usernames[i] + '\nStatus: Online'; 
    } 
    $('#data_display').append('<h1>' + html + '</h1>'); 
});

，還可以使用.append代替.html，否則將取代#data_display內的HTML。

有沒有必要做html += ....

來源

2017-06-21 01:27:34

這樣做的竅門，謝謝！ – Weston

我認爲JavaScript的承諾，將與您的情況幫，帶的jQuery遞延API作爲一個例子：

function fetchUserStatus(username) { 
    var defer = jQuery.Deferred(); 
    var api = 'https://wind-bow.gomix.me/twitch-api/streams/' + username + '?callback=?'; 
    $.getJSON(api, function(data) { 
    let online = data.stream == null; 
    if (online) { 
     defer.resolve('Offline'); 
    } else { 
     defer.resolve('Online'); 
    } 
    }); 
    return defer.promise(); 
} 

let usernames = ['freecodecamp']; 
let promises = []; 
for (let i = 0; i < usernames.length; i++) { 
    promises.push(fetchUserStatus(usernames[i])); 
} 
$.when.apply($, promises).then(function() { 
    let html = ''; 
    for (let i = 0; i < arguments.length; i++) { 
    html += usernames[i] + '\nStatus: ' + arguments[i]; 
    } 
    $('#data_display').append('<h1>' + html + '</h1>'); 
});

jQuery的時候不支持傳遞數組承諾，這就是使用apply函數的原因，並且在回調函數中，您需要使用arguments來引用promise中已解析的所有值。

希望這會有所幫助。

來源

2017-06-21 03:08:28

回答

相關問題