Question

我正在研究Twitch.tv应用程序作为FCC课程的一部分。我接近终点线，但我很难为每个用户获取徽标。为了解释，有两个不同的API链接，我可以获取数据：Streams＆amp;通道。

如果我使用溪流链接，我只能在用户在线时获得徽标（这实际上没有任何好处），与频道I一样，无论如何都可以获得。为了得到流媒体，我真的需要使用Stream链接。结果我想，我需要同时使用它们。

我已经尝试了多种方式来对流进行一次调用，并且尝试使用不同结果的一个用于徽标的通道，我真的无法弄明白。我试过的最新方式（下面）给我标识，但没有正确的流/流数据。我猜这个问题就是我如何将呼叫嵌套在另一个中，但我无法找到正确的方法。

感谢任何人都能给予的帮助。这是我的CodePen，您可以在其中查看完整代码。

function apicall(streamer) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + streamer, function(a) {
    if (a.stream == null) {
      stateclass = 'bg-danger';
      game = 'Offline';
      status = '';
      url = '';
    } else {
      stateclass = 'bg-success';
      game = a.stream.game + ': ';
      status = a.stream.channel.status;
      url = '<a target="_blank" href="' + a.stream.channel.url + '">';
    }
    who = streamer;
    $.getJSON('https://api.twitch.tv/kraken/channels/' + streamer, function(b) {
      logo = b.logo;
      console.log(logo);

      html += '<div class ="row ' + stateclass + '"><div class="col-xs-2"><img src="' + logo + '"></div><div class="col-xs-4">' + who + '</div>' + '<div class="col-xs-6">' + url + game + status + '</a></div></div>';
      $(".options").html(html);
    });
  });
}

Answer 1

请参阅jQuery.when()。

function apicall(streamer) {
  var streamsReq = $.getJSON('https://api.twitch.tv/kraken/streams/' + streamer);
  var channelsReq = $.getJSON('https://api.twitch.tv/kraken/channels/' + streamer);

  return $.when(streamsReq, channelsReq).done(function (streams, channels) {
    var stateclass, link, html = '';

    if (streams.stream && streams.stream.cannel) {
      stateclass = 'bg-success';
      link = '<a target="_blank" href="' + streams.stream.channel.url + '">' + 
        streams.stream.game + ': ' + streams.stream.channel.status + '</a>';
    } else {
      stateclass = 'bg-danger';
      link = 'Offline';
    }

    html += '<div class ="row ' + stateclass + '">';
    html += '<div class="col-xs-2"><img src="' + channels.logo + '"></div>';
    html += '<div class="col-xs-4">' + streamer + '</div>';
    html += '<div class="col-xs-6">' + link + '</div>';
    html += '</div>';
    $(".options").html(html);
  }).fail(function () {
    // add error handling
  });
}

无法弄清楚如何准确地进行两次API调用

1 个答案: