JavaScript-如何为RESTAPI请求创建可重用函数？

我正试图为我的工作中的web服务状态创建一些UI仪表板，但我不知道如何重用我的代码，因为我可以重用我对两台主机的请求，并拆分响应以获得相关的“led图标”

rational是单击一些HTML按钮，一次发送两个RESTAPI请求。 在响应中，我有一个IF语句来选择相关的LED图标，并将其显示在HTML仪表板中的服务名称旁边

我的代码工作得很好，但我不知道如何使其可重用

var xhttp = new XMLHttpRequest();

  var ledTypes = {
    green: "<img src='green.png' height='30' width='30'>",
    red: "<img src='red.png' height='30' width='30'>",
    yellow: "<img src='yellow.png' height='30' width='30'>"
  };

function kongChecking() {
    //Kong - APIs services
    xhttp.open("GET", "http://blablabla.com:1111/bla1", false);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
    console.log(xhttp.status);
}


function ledResponseK() {
    if (xhttp.status === 200 || 204) {
        document.write(ledTypes.green);
    }
    else if (xhttp.status === 500 || 404) {
        document.write(ledTypes.red);
    }
    else if (xhttp.status === 300 || 301 || 302) {
        document.write(ledTypes.yellow);
    }
};

var xhttp=new-XMLHttpRequest（）；
变量类型={
绿色：“，
红色：“，
黄色：“
};
函数空检查（）{
//香港-API服务
xhttp.open（“GET”http://blablabla.com:1111/bla1“，假）；
setRequestHeader（“内容类型”、“应用程序/json”）；
xhttp.send（）；
var response=JSON.parse（xhttp.responseText）；
控制台日志（xhttp.status）；
}
函数ledsresponsek（）{
如果（xhttp.status==200 | | 204）{
document.write（ledTypes.green）；
}
else if（xhttp.status==500 | | 404）{
document.write（ledTypes.red）；
}
else if（xhttp.status==300 | | 301 | | 302）{
文件。写入（LED类型。黄色）；
}
};

一次发送所有REST API请求的HTML元素-

<a href="#tabs-2" onclick="kongChecking()" >Services status</a>

相关web服务旁边的呈现响应图标-

<script>ledResponse()</script><p align="center">Kong API's</p>

香港API的

---

此功能的基本重用（仅针对此特定需求）可以这样做-

使用主机数组调用公共函数，并使用相同的函数处理每个响应：

var hosts=[]https://www.url1.com', 'https://www.url2.com', 'https://www.url3.com']; //补充
变量类型={
绿色：“，
红色：“，
黄色：“
};
函数空检查（）{
var xhttp=newXMLHttpRequest（）；
//香港-API服务
对于（var hostIndx=0；hostIndx

div{
宽度：150px；
显示：内联块；
}

主机1状态
主机2状态
Host 3 Status

我没有真正理解你想要实现的目标。请你再解释一下好吗？我很确定如果你使用JS会更好。我的意思是，单击HTML可以工作，但更好的方法是使用eventlistener，你用HTML写的响应不正确。你应该使用innerHtml或其他东西。最后但不仅仅是每次发送请求时都应该调用leadResponseK函数。这在这里非常重要。当单击HTML按钮时，我希望它为不同的服务器发送多个GET请求，并从每个服务器和每个web服务接收单独的响应，并通过图像（LED图标）显示响应除了他的web服务名称谢谢，这似乎是我寻找的方式。但我如何通过HTML调用kongChecking函数并触发相关主机？您能否发布此示例？您想要一个按钮检查所有主机，还是每个主机一个按钮？@IdanEI想通过“onClick”单击HTNL按钮并将此请求发送到一个主机中，并以单独的IDK格式显示其响应，以使用您在上面的回答中所指的innerHTML。您可以为此添加示例吗？@IdanE您可以展示您尝试过的内容吗？检查for循环是否良好，用于循环的变量是什么？