使用纯JS的REST API微调器

Question

我正在调用rest API，并试图在加载结果之前使用Spinner。

它是用纯JS编写的，所以我找不到适合它的解决方案。

这是我的代码。我需要预加载器加载，直到显示结果。例如，在no result found之前，我需要一些微调器。虽然我已经对微调器进行了编码，但是我需要在脚本运行之前显示它。 console.log可以为我工作，我可以在那里替换微调器脚本。

谢谢

function callREST() {
  const app = document.getElementById('root');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>

Answer 1

那么三件事：

1. 从一开始就将预加载器设置为display:none。我在这里设置为内联。
2. 在执行diplay: block时将预加载器设置为callREST()。使它成为变量声明之后的第一件事。
3. 在display:none之后（和/或您要检查的其他条件）将预加载器设置回request.readyState === 4

我们在这里：

function callREST() {
  const app = document.getElementById('root'),
        preloader = document.getElementById('loader');

  preloader.setAttribute('style', 'display:block');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();

  request.onreadystatechange = function() {

      if (request.readyState === 4) {
          preloader.setAttribute('style', 'display:none');
      }
  }
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay" style="display:none;">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>