javascript - 使用纯 JS 的 REST API 微调器
问题描述
我正在调用rest API并尝试在加载结果之前使用微调器。
它是用纯 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>
解决方案
所以三件事:
- 从一开始就将预加载器设置为
display:none
。我在这里将其设置为内联。 - 将预加载器设置为何
diplay: block
时callREST()
执行。使它成为变量声明之后的第一件事。 - 将预加载器设置回
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>
推荐阅读
- r - x 轴图 R 的色点
- php - 如何在laravel中更新和删除数组中的值
- cmake - 有没有办法将来自不同 CMakelist 的多个变量(`set`)组合在一起?
- kotlin - 有什么方法可以让 kotlin 文档与 Intellij 一起工作?
- android - 没有这样的付款意图错误条纹android集成
- lambda-calculus - lambda 演算示例问题
- c++ - 动态数组错误帮助:“>>”:未找到采用“重载函数”类型的右侧操作数的运算符
- python-3.x - python3 split 方法没有注册我的正则表达式
- php - 通过 Windows 10 在 Visual Studio Code 中编写 PHP 没有任何效果
- reactjs - 使用 Menu 映射多个 Card 组件