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

Question

作为FCC课程的一部分，我正在开发Twitch.tv应用程序。 我已经接近终点线了，但我正在努力为每个用户获取徽标。 解释一下，有两个用于获取数据的API链接：流和通道。

如果我使用流链接，则仅当用户在线时才能获得徽标（这确实不好），而在Channel上无论如何我都可以获得徽标。 为了获得流媒体内容，我确实需要使用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
  });
}