每个数组元素的独立 HTTP 状态

Question

我正在使用以下代码在 HTML 中打印一些信息。

我有问题。 首先，我使用：

fetch(resultado.url).then(function(response) {console.log(response.status);

要获取数组“channelList”内的 URL 的 http 状态，但我不知道如何独立获取该状态，我的意思是，对于数组的所有元素。

然后，如果我将“getElementbyID”更改为“getElementbyClassName”以在 HTML 中显示“状态”，这将不起作用

const channelList = [
{
    name: "La 1",
    title: "RTVE La 1",
    link: "go:la1",
    imgClass: "la1",
    flag: "es",
    url: "./la1.html",
},

{
    name: "La 2",
    title: "RTVE La 2",
    link: "go:la1",
    imgClass: "la1",
    flag: "es",
    url: "./la2.html",
},
];

const resultado = channelList.find( canal => canal.name === 'La 1' );

// HTTP STATUS

fetch(resultado.url).then(function(response) {
  console.log(response.status);
    if(response.status !== 200){
        let stt = document.getElementById('hlstatus');
        stt.innerText = "Offline";
    } else {
        document.getElementById('hlstatus').innerText = "Online";
    }
});

// PRINT ON HTML

const container = document.getElementById("locales");

var img = "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e";
channelList.forEach(result => {
  // Construct card content
const content = `
<div class="col-6 col-sm-4 col-lg-3 col-xl-2">
    <div class="dropdown card darkolorbg text-white card-canal card-link text-white">
        <a class="card-link text-white" href="${result.link}" ${result.dDown}>
        <div class="card-body">
        <div class="d-flex justify-content-center">
            <img class="canal-img ${result.imgClass}" src="${img}" alt="">
        </div>
            <div class="d-flex justify-content-center"><h5>${result.name} <span class="hidden">${result.title}</span> <br><span class="subtf1"><i class="flag ${result.flag}"></i></span> <span id="hlstatus"></span> </div>
        </div>
        </a>
        </div>
</div>
    `;
  // Append newyly created card element to the container
container.innerHTML += content;
});

<div id="locales"></div>

Answer 1

如果我对您的理解正确，那么这段代码应该可以按您的预期工作。 但请注意错误处理。 可以通过将回调函数传递给 promise 的 .catch 方法来完成。

var img = "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e";
const container = document.getElementById("locales");

// PRINT ON HTML

function makeStatusCard(result) {
  const content = `
<div class="col-6 col-sm-4 col-lg-3 col-xl-2">
    ${result.status}
    <div class="dropdown card darkolorbg text-white card-canal card-link text-white">
        <a class="card-link text-white" href="${result.link}" ${result.dDown}>
        <div class="card-body">
        <div class="d-flex justify-content-center">
            <img class="canal-img ${result.imgClass}" src="${img}" alt="">
        </div>
            <div class="d-flex justify-content-center"><h5>${result.name} <span class="hidden">${result.title}</span> <br><span class="subtf1"><i class="flag ${result.flag}"></i></span> <span id="hlstatus"></span> </div>
        </div>
        </a>
        </div>
</div>
    `;
  // Append newyly created card element to the container
container.innerHTML += content;
}

const channelList = [
{
    name: "La 1",
    title: "RTVE La 1",
    link: "go:la1",
    imgClass: "la1",
    flag: "es",
    url: "https://avax.dev/data/validators.json",
},

{
    name: "La 2",
    title: "RTVE La 2",
    link: "go:la1",
    imgClass: "la1",
    flag: "es",
    url: "https://avax.dev/data/validators.json",
},
];

// HTTP STATUS

for (let channel of channelList) {
   fetch(channel.url).then(function(response) {
      channel.status = response.status === 200 ? 'Online' : 'Offline';
      makeStatusCard(channel);
   });
}

<div id="locales"></div>