调用两个 ajax 请求并将这两个请求附加到同一个 div 中

Question

这是我的项目，我正在使用 ajax 请求

一个加载所有流

另一个用于获取在线流信息

因为没有一个 API 同时包含有关在线和离线流的信息

所以我已成功加载所有流的名称和徽标

如果流在线，我想对流div 进行更改(添加状态，将背景颜色更改为绿色(

这是我尝试过的

流光阵列

var streamer = ["Thulz","ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];

对于循环获取每个流光，第一个 ajax 用于获取每个流光并将它们放在每个div 中，第二个是我正在努力的地方

for(i=0;i<streamer.length;i++){
$.ajax({
url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i],
success: function(response) {
$("#result").append("<div class='row streams'><div class='col-12 imag'><img src='"+response.logo+"' alt='"+response.name+"' height='75' width='75'><div class='texts'>"+response.name+"<p id='"+response.name+"'></p></div></div></div>");          
}});//first AJAX
$.ajax({//second ajax
url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i],
success: function(online) {
if(online.stream !== null){
console.log(online.stream.channel.status);
}
}//response success
});
}//streamer for loop

我尝试过：

为每个主播提供唯一的 #id，然后在第二个请求获得时附加状态并执行 CSS 更改

$("#"+streamer[i]).append(online.stream.channel.status);

或

var sname= online.stream.channel.name;
$("#"+sname).append(online.stream.channel.status);

没有一个管用，救命！

Answer 1

有人在这里回答了我的问题 https://forum.freecodecamp.org/t/twitch-api-project-issue/139229/2

这是答案

您遇到的问题是 AJAX 中的第一个 A。当你在 对 API 进行异步调用并等待响应， 您的循环只是继续，没有任何设置来保存数据，当它 到达。您需要做的是存储 AJAX 调用的结果 在变量中，当两个变量都成功获取其 数据，对这些数据执行某些操作：

var a = $.ajax({ . . . }); //first AJAX
var b = $.ajax({ . . . }); //second AJAX
$.when(a, b).done(function(channelData, streamData) { . . . });

$.when((.done(( 将跟踪每个变量的 a 和 b 变量 在循环中呼叫，只有在两个都到达时才继续。只要把 你的append((代码在那里，看看这是否可以解决问题。也 channelData 和 streamData 分别指 a 和 b。你 不必使用这些变量名称，这就是我用于我的 为了清晰起见，抽搐应用程序

我的最终代码笔 https://codepen.io/Krimlen/pen/rzejdV

正确的代码

var streamer = ["Thulz","ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas","Rakin"];
for(i=0;i<streamer.length;i++){
var firstAjax = $.ajax({
url: "https://wind-bow.glitch.me/twitch-api/channels/"+streamer[i]});//first AJAX
var secondAjax = $.ajax({//second ajax
url: "https://wind-bow.glitch.me/twitch-api/streams/"+streamer[i]
});
$.when(firstAjax, secondAjax).done(function(channel, live) {
$("#result").append(*acess both ajax results here by the names channel and live and append them*);