Question

我正在使用Twitch的API（因为CORS而来自备用链接）。运行时，html会返回空白状态。是因为回调，我该怎么做才能获得数据？我可以确认该链接有效，并试图踩过它而没有运气。

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>');
  }

Answer 1

将你的最后一个追加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 += ....

Answer 2

我认为javascript promise会对你的情况有所帮助，以jQuery deferred 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何时不支持传递promises数组，这就是使用apply函数的原因，而在当时的回调中，你需要使用arguments来引用所有已解析的值。的承诺。

希望这会有所帮助。

API for for for循环

2 个答案: