Есть ли более чистый способ перезапустить вызов API, чем с помощью window.setInterval (), чем я делаю здесь? - PullRequest
Новая
       11

Есть ли более чистый способ перезапустить вызов API, чем с помощью window.setInterval (), чем я делаю здесь?

0 голосов
/ 26 апреля 2019

Я не очень знаком с 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);

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

В вашем случае СУХОЙ - не повторяйте себя 

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();
0 голосов
/ 26 апреля 2019

Вы можете вызвать функцию подряд, используя setTimeout и ожидая завершения запроса 

var timeoutPtr;

/**
 * Execute a request, can take DELTA miliseconds
 */
function executeRequest() {
  return new Promise((resolve) => {
    var request = new XMLHttpRequest();

    // ...

    request.onload = function() {
      // ...

      resolve();
    };

    request.send();
  });
}

/**
 * Execute the request, when it's over, wait 2s and execute it again
 * and again, and again...
 */
function executeRequestInARow() {
  // In case you call executeRequestInRow multiple time
  clearTimeout(timeoutPtr);

  executeRequest()
    .then(() => {
      timeoutPtr = setTimeout(function() {
        executeRequestInARow();
      }, 2000);
    });
}

executeRequestInARow();
...