尝试通过 JQuery 进行 2 Ajax 调用，然后在数据前添加

Question

我正在完成 Freecodecamp Twitch API 项目，但无法正确显示 API 数据。徽标、频道和状态返回为未定义。

我知道 API 确实有效。我在代码中编写的方式一定有问题，但无法弄清楚是什么。

这是我的代码：

$(document).ready(function() {

  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for (i=0; i<users.length; i++) {
    var url="https://api.twitch.tv/kraken/channels/" + users[i];
    var logo;
    var channel;
    var status;
    $.ajax ({
      type: 'GET',
        url: url,
      headers: {
        'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
      },
      success: function(data) {
        logo = data.logo;
        channel = data.name;
      }      

    });
    var url2 = "https://api.twitch.tv/kraken/streams/" + users[i];
    $.ajax ({
      type: 'GET',
      url: url2,
      headers: {
        'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
      },
      success: function(data2) {
        if (data2.stream == null) {
          status = "Offline";
        } else {
          status = "Online";
        };

      }

    });
    $("#channelInfo").prepend("<div class='row'><div class='col-xs-4'><img src="+logo+"></div><div class='col-xs-4'>"+channel+"</div><div class='col-xs-4'>"+status+"</div>")

  };
});

这是我的代码笔的 link：http://codepen.io/drhectapus/pen/VPNQJa?editors=1011

如有任何帮助，我们将不胜感激。

Answer 1

因为 AJAX 默认是异步的，你的最后一行在你的 ajax 请求完成之前被执行。您应该在 success: function(data) 区域内获得 post-调用结果，如下所示。请注意，我将 async:false 添加到您的 ajax 调用中，以便内部请求按顺序发生，这将使您的对象保持同步：

$(document).ready(function() {

  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for (i=0; i<users.length; i++) {
    var url="https://api.twitch.tv/kraken/channels/" + users[i];
    var user = users[i];
    var logo;
    var channel;
    $.ajax ({
      type: 'GET',
      url: url,
      async: false,
      headers: {
        'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
      },
      success: function(data) {
        logo = data.logo;
        channel = data.name;

        var url2 = "https://api.twitch.tv/kraken/streams/" + user;
        $.ajax ({
          type: 'GET',
          async: false,
          url: url2,
          headers: {
            'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
          },
          success: function(data) {
            if (data.stream == null) {
              status = "Offline";
            } else {
              status = "Online";
            };
            $("#channelInfo").append("<div class='row'><div class='col-xs-4'><img src="+logo+"></div><div class='col-xs-4'>"+channel+"</div><div class='col-xs-4'>"+status+"</div></div>");
          }

        });
      }

    });
  };
});

Answer 2

简单：一个ajax调用就像，你发送一个请求，稍后（我们不知道什么时候！）会有一个响应。

if you have an AJAX call:

所以你会提供一个 function(){} 并将其提供给你的 AJAX API （$ajax() 在你的情况下），并且您的 Ajax API 会运行您的 function(){} 当收到响应时，如此简单和美好。 这称为异步行为。

所以如果你想在收到你的回复时做点什么，你应该在你的 function(){}.

中编码

If you have a bunch of AJAX calls:

同样的规则也适用于此，但我假设您会在收到每个 ajax 呼叫的 所有响应 时执行某些操作。 还有很多工作要做。

假设您有 3 个 ajax 次通话，

一种方法是像这样为每个人准备一个 function(){}：

$.ajax( "http://url_1.com", response );//say this response triggers 1sec later
$.ajax( "http://url_2.com", response );//say this response triggers 3sec later
$.ajax( "http://url_3.com", response );//say this response triggers 2sec later

最后，如果网络一切正常，我们的 response 回调函数 将触发 3 次。

var res = [];

function response(data) {
    // the data is handled by $.ajax() so every time I can ask for sent data like url, headers and etc.

    if (data.url == "http://url_1.com") {
        res[0] = data;
    }
    else if (data.url == "http://url_2.com") {
        res[1] = data;
    }
    else if(data.url == "http://url_3.com"){
        res[2] = data;
    }

    if(arr.length === 3){
    //we are done now, our array has 3 indexes and values
    //it means this is the third call(and last) of the response function
    }
}

所以我定义了一个名为 res 的数组，并为一个特定的 URL.

分配了每个索引

但是我们还没有完成，Response function应该知道什么时候所有的数组都被填满了，所以需要检查我们的数组以确保每个索引都被填满。

您看到的所有代码都经过了深度简化，仅用于演示目的，您需要为生产提供大量检查。

这种情况（一堆 ajax 调用）可以通过其他方法完成，例如 Promises 或生成器 。

尝试通过 JQuery 进行 2 Ajax 调用，然后在数据前添加

Trying to make 2 Ajax calls via JQuery, and then prepending the data

javascript

ajax

jquery

twitch