javascript - 有没有比我在这里使用 window.setInterval() 更干净的方法来重新运行 api 调用？

Question

就此而言，我对 javascript 或编程不太熟悉。然而，尽管如此，我还是成功地完成了这项艰巨的任务。我想知道，是否有适当或更务实的方法来做到这一点？预先感谢您的帮助。如果有人想知道的话，这是一个队列管理系统。

var requestURL = 'https://api.qminder.com/v1/tickets/search/?rest-api-key=APIKEY'
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
  var customers = request.response;
  console.log(customers.data)

  x = []

  for (var i = 0; i < customers.data.length; i++) {

    console.log(customers.data[i].status);

    if (customers.data[i].status == "NEW") {
      x.push(customers.data[i])
    }
  }

  var html = '<ul>';
  for (var i = 0; i < x.length; i++) {
    html += '<li>' + x[i].firstName + '</li>';
    console.log(x[i].firstName)
  }
  html += '</ul>';
  document.getElementById("names").innerHTML = html;

}


window.setInterval(function() {
  var requestURL = 'https://api.qminder.com/v1/tickets/search/?rest-api-key=APIKEY'
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var customers = request.response;
    console.log(customers.data)

    x = []

    for (var i = 0; i < customers.data.length; i++) {

      console.log(customers.data[i].status);

      if (customers.data[i].status == "NEW") {
        x.push(customers.data[i])
      }
    }

    var html = '<ul>';
    for (var i = 0; i < x.length; i++) {
      html += '<li>' + x[i].firstName + '</li>';
      console.log(x[i].firstName)
    }
    html += '</ul>';
    document.getElementById("names").innerHTML = html;

  }
}, 2000);

Answer 1

就您而言，DRY - 不要重复自己

function requestIt() {
  var requestURL = 'https://api.qminder.com/v1/tickets/search/?rest-api-key=APIKEY'
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.onload = function() {
    var customers = request.response;
    console.log(customers.data)

    x = []

    for (var i = 0; i < customers.data.length; i++) {

      console.log(customers.data[i].status);

      if (customers.data[i].status == "NEW") {
        x.push(customers.data[i])
      }
    }

    var html = '<ul>';
    for (var i = 0; i < x.length; i++) {
      html += '<li>' + x[i].firstName + '</li>';
      console.log(x[i].firstName)
    }
    html += '</ul>';
    document.getElementById("names").innerHTML = html;

  }
  request.send(); // do not send before the onload has been defined
}
requestIt(); // first call
window.setInterval(requestIt, 2000);

但是我更愿意为此安装 jQuery，而不是使用间隔以防服务器阻塞

var requestURL = 'https://api.qminder.com/v1/tickets/search/?rest-api-key=APIKEY'

function requestIt() {
  $.get(requestURL, customers => {
    console.log(customers.data);
    var html = ['<ul>'];
    customers.data.filter(data => data.status == "NEW")
      .forEach(x => html.push('<li>' + x.firstName + '</li>'))
    )
    html.push('</ul>')
    $("#names").html(html.join(""));
    setTimeout(requestIt,2000);
  })
}  
requestIt();