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

Question

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

其原理是单击某个 HTML 按钮并一次性发送几个 REST API 请求。在响应中，我有一个 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);
    }
};

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

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

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

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

Answer 1

这个功能的基本复用，只有这个特定的需要才可以这样做 -

使用主机数组调用通用函数，并使用相同的函数处理每个响应:

var hosts = ['https://www.url1.com', 'https://www.url2.com', 'https://www.url3.com']; //Added

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() {

  var xhttp = new XMLHttpRequest();
  //Kong - APIs services
  for (var hostIndx = 0; hostIndx < hosts.length; hostIndx++) {
    try {
      xhttp.open("GET", hosts[hostIndx], false);
      xhttp.setRequestHeader("Content-type", "application/json");
      xhttp.send();
      var response = JSON.parse(xhttp.responseText);
      console.log(xhttp.status);
      //Handle response: (passing the current host first child - span element
      handleLedResponse(xhttp.status, hostIndx);
    } catch (err) {
      handleLedResponse(500, hostIndx);
    }
  }
}


function handleLedResponse(response, hostIndx) {
  var curSpan = document.getElementById('host_' + hostIndx);
  //Better switch this ugly nested if's to SWITCH / CASE
  if (response === 200 || 204) {
    curSpan.innerHTML = ledTypes.green;
  } else if (response === 500 || 404) {
    curSpan.innerHTML = ledTypes.red;
  } else if (response === 300 || 301 || 302) {
    curSpan.innerHTML = ledTypes.yellow;
  }
};

div {
  width: 150px;
  display: inline-block;
}

<a href="#tabs-1" onclick="kongChecking()">Check all status</a>
<br/>
<div>Host 1 Status <span id='host_0'></span></div>
<div>Host 2 Status <span id='host_1'></span></div>
<div>Host 3 Status <span id='host_2'></span></div>