Javascript 使用ajax作为json获取的数据在数组中随机推送

我有一个频道名称数组（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]);

});

$（文档）.ready（函数（）{
var user_arr=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2nijas”]
var newarr=[]；
var streams=[]；
var通道=[]；
对于（var i=0；i

正如您从代码中看到的，我正在尝试用json获取详细信息，但显然，当我将详细信息推送到一个新数组中时，它们并没有以与用户_arr相同的方式被推送。我相信它们是按照先收到的顺序被推送的

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

加上当我控制台.log（通道）；它向我展示了充满数据的数组 但是，当我在上一个命令后面输入console.log（channels.length）时，长度为0，并且没有显示任何数据

我可以知道使用$.ajax和$.getJSON以原始数组的顺序获取数据的最佳方法是什么吗

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

---

如果有人能告诉我如何将map函数应用到数组中，以便根据用户arr array获得最终数组，那将非常有帮助。这应该可以做到，不过我建议你如果打算用这个小玩具做更多的事情，就学习承诺

var user_arr=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“FreeCodeCamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2nijas”]
var streams=[]；
var通道=[]；
var计数=0；
函数完成（）{
计数++；
如果（计数===用户数组长度*2）{
控制台日志（流）；
控制台日志（通道）；
}
}
函数getData（用户名、索引）{
变量url1=”https://wind-bow.gomix.me/twitch-api/streams/“+name+”？回调=？”
变量url2=”https://wind-bow.gomix.me/twitch-api/channels/“+name+”？回调=？”
$.ajax({
键入：“获取”，
url:url1，
数据类型：“json”，
async:true，
成功：功能（流式数据）{
数据流[索引]=数据流；
完成（）；
}
});
$.ajax({
键入：“获取”，
url:url2，
数据类型：“json”，
async:true，
成功：功能（通道_数据）{
信道[索引]=信道_数据；
完成（）；
}
});
}
对于（变量i=0；i

---

虽然

async:false

可能会解决这个问题，但它不是一个可行的解决方案。这是一种糟糕的做法，因为它阻止了UI线程的更新，使浏览器看起来好像在请求进行时挂起了

更好的解决方案是正确使用异步模式，并将所有请求聚合到一个承诺数组中。一旦这些承诺得到解决（即，当所有请求完成时），您就可以对

频道

和

流

数组进行排序，以匹配

用户阵列中包含的
显示名称
的顺序。试试这个：


var user_arr=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“FreeCodeCamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2nijas”]
var newarr=[]；
var streams=[]；
var通道=[]；
var promises=user\u arr.map（函数（用户名）{
var deferred=$.deferred（）；
变量url1=`https://wind-bow.gomix.me/twitch-api/streams/${username}？回调=？`；
变量url2=`https://wind-bow.gomix.me/twitch-api/channels/${username}？回调=？`；
$.when（$.ajax({
键入：“获取”，
url:url1，
数据类型：“json”，
成功：功能（流式数据）{
流式推送（流式_数据）；
}
})，$.ajax({
键入：“获取”，
url:url2，
数据类型：“json”，
成功：功能（通道_数据）{
通道推送（通道_数据）；
}
})).done（函数（）{
延迟。解决（）；
});
延迟返回。承诺（）；
});
$.when.apply（$，promissions）.done（函数（）{
通道.排序（功能（a，b）{
返回user\u arr.indexOf（a.display\u name）>user\u arr.indexOf（b.display\u name）；
});
streams.sort（函数（a，b）{
返回user\u arr.indexOf（a.\u links.channel.display\u name）>user\u arr.indexOf（b.\u links.channel.display\u name）；
})
控制台日志（通道）；
控制台日志（流）；
});
单独回答，其中包括我能想到的承诺的最佳用途

注意：
Promise
受除Internet Explorer（是的，甚至是Edge）之外的所有人的支持。

我不知道如何将它映射到JQuery$.when，所以如果您需要IE支持，您需要弄清楚这一点


var user_arr=[“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2nijas”]
函数getStreams（用户名）{
变量url1=”https://wind-bow.gomix.me/twitch-api/streams/“+userName+”？回调=？”；
返回$.ajax({
键入：“获取”，
url:url1，
数据类型：“json”，
异步：true
});
}
函数getChannels（用户名）{
变量url2=”https://wind-bow.gomix.me/twitch-api/channels/“+userName+”？回调=？”；
返回$.ajax({
键入：“获取”，
url:url2，
数据类型：“json”，
异步：true
});
}
var streamPromise=Promise.all（用户映射（getStreams））
var channelPromise=Promise.all（user\u arr.map