Question

我有一个频道名称数组（user_arr），我需要从twitch.tv获取他们的详细信息

以下是代码，请阅读以下详细信息

$(document).ready(function(){
var user_arr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]


  var newarr =[];
  var streams  = [];
  var channels = [];

for(var i = 0 ; i < user_arr.length; i++){ 
    name = user_arr[i];


var url1 ="https://wind-bow.gomix.me/twitch-api/streams/"+name+"?callback=?"
var url2 ="https://wind-bow.gomix.me/twitch-api/channels/"+name+"?callback=?"


$.ajax({

  type:"GET",
  url:url1,
  dataType:"json",
  async:false,
  success:function(streamed_data){
    streams.push(streamed_data);
  }


});


     $.ajax({

  type:"GET",
  url:url2,
  dataType:"json",
  async:'true',
  success:function(channel_data){
    channels.push(channel_data);
  }


});



     }

console.log(channels);

console.log(channels[1]);

});

从代码中可以看出我正在尝试获取json中的细节，但显然当我将细节推送到新数组时，它们的推送方式与user_arr不同。我相信它们是按照先收到的顺序推送的

我正在使用jquery并且已经向很多人询问了这个问题，但大多数回复都是关于承诺的（我不理解的概念，不知道如何使用它）

加上我的console.log（频道）;它向我展示了填充数据的数组但是当我在上一个命令之后的console.log（channels.length）时，长度为0并且没有显示数据

我是否可以使用$ .ajax以及$ .getJSON

了解以原始数组的顺序获取数据的最佳方法

我尝试将map函数应用于最终数组以重新排列数组但是失败了

如果有人能告诉我如何将map函数应用于数组以获得基于user_arr数组的最终数组，那将非常有用

Answer 1

虽然async: false可以解决问题，但它不是一个可行的解决方案。这是一种可怕的做法，因为它会阻止UI线程更新，使浏览器看起来好像在请求正在进行时已经挂起。

更好的解决方案是正确使用异步模式并将所有请求聚合到promises数组中。一旦这些承诺得到解决（即所有请求都已完成），您就可以对channel和streams数组进行排序，以匹配display_names中包含的user_arr的顺序}。试试这个：

＆＃13;

var user_arr = ["ESL_SC2", "OgamingSC2", "cretetion", "FreeCodeCamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

var newarr = [];
var streams = [];
var channels = [];

var promises = user_arr.map(function(username) {
  var deferred = $.Deferred();
  var url1 = `https://wind-bow.gomix.me/twitch-api/streams/${username}?callback=?`;
  var url2 = `https://wind-bow.gomix.me/twitch-api/channels/${username}?callback=?`;

  $.when($.ajax({
    type: "GET",
    url: url1,
    dataType: "json",
    success: function(streamed_data) {
      streams.push(streamed_data);
    }
  }), $.ajax({
    type: "GET",
    url: url2,
    dataType: "json",
    success: function(channel_data) {
      channels.push(channel_data);
    }
  })).done(function() {
    deferred.resolve();
  });

  return deferred.promise();
});

$.when.apply($, promises).done(function() {  
  channels.sort(function(a, b) {
    return user_arr.indexOf(a.display_name) > user_arr.indexOf(b.display_name);
  });
  
  streams.sort(function(a, b) {
    return user_arr.indexOf(a._links.channel.display_name) > user_arr.indexOf(b._links.channel.display_name);
  })
  
  console.log(channels);
  console.log(streams);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

这应该可以解决问题，但如果你打算用这个只做一点玩具的话，我真的建议你学习承诺。

var user_arr = ["ESL_SC2", "OgamingSC2", "cretetion", "FreeCodeCamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

var streams = [];
var channels = [];

var count = 0;

function done() {
  count++;
  if (count === user_arr.length * 2) {
    console.log(streams);
    console.log(channels);
  }
}

function getData(userName, index) {
  var url1 = "https://wind-bow.gomix.me/twitch-api/streams/" + name + "?callback=?"
  var url2 = "https://wind-bow.gomix.me/twitch-api/channels/" + name + "?callback=?"

  $.ajax({
    type: "GET",
    url: url1,
    dataType: "json",
    async: true,
    success: function(streamed_data) {
      streams[index] = streamed_data;
      done();
    }
  });

  $.ajax({
    type: "GET",
    url: url2,
    dataType: "json",
    async: true,
    success: function(channel_data) {
      channels[index] = channel_data;
      done();
    }
  });
}

for (var i = 0; i < user_arr.length; i++) {
  name = user_arr[i];
  getData(name, i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您的日志看起来很奇怪，因为当您记录它时数组WAS为空，但是如果您记录整个数组而不是长度，则devtools会反映稍后发生的更改。

Answer 3

单独的答案，其中包括我能提出的最好的承诺。

注意：除Internet Explorer之外的所有人都支持Promise（是的，甚至是Edge）。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

我不知道如何将它映射到JQuery $ .when，所以如果你需要IE支持，你需要弄明白。

＆＃13;

var user_arr = ["storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

function getStreams(userName) {
  var url1 = "https://wind-bow.gomix.me/twitch-api/streams/" + userName + "?callback=?" ; 
  return $.ajax({
    type: "GET",
    url: url1,
    dataType: "json",
    async: true
  });
}
  
function getChannels(userName) {
  var url2 = "https://wind-bow.gomix.me/twitch-api/channels/" + userName + "?callback=?";
  return $.ajax({
    type: "GET",
    url: url2,
    dataType: "json",
    async: true
  });
}

var streamPromise = Promise.all(user_arr.map(getStreams))
var channelPromise = Promise.all(user_arr.map(getChannels))

Promise.all([streamPromise, channelPromise]).then(function(results){
  const streams = results[0];
  const channels = results[1];
  
  //do what you need to do
  console.log('users:', user_arr);
  console.log('streams:', streams);
  console.log('channels:', channels);
});

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

使用ajax以json方式获取的数据在数组

3 个答案: