我有一个API
请求是Javascript
使用fetch
.
问题或问题是有时我需要显示很多数据并且需要一段时间才能加载甚至知道他正在执行下面的过程,有时我怀疑他是否正在执行,所以我会就像他那样,虽然他API fetch
做了所有的过程,首先是 gif、png 或任何设计的微调器效果,CSS
我唯一想知道的就是知道如何去做,使用什么,其余的我可以做。
代码(这是一个例子,不是我正在使用的数据):
fetch("https://api.covid19api.com/summary")
.then((response) => response.json())
.then((datos) => {
var cov19 = datos.Global
cadena = `<tr>
<td><input type="number" value="${cov19.NewConfirmed}"></td>
<td><input type="number" value="${cov19.TotalConfirmed}"></td>
<td><input type="number" value="${cov19.NewDeaths}"></td>
<td><input type="number" value="${cov19.TotalDeaths}"></td>
<td><input type="number" value="${cov19.NewRecovered}"></td>
<td><input type="number" value="${cov19.TotalRecovered}"></td>
</tr>`
document.getElementById('generar_datos').innerHTML= cadena
})
.catch(error => console.error('Error:', error));
<div class="row">
<table class="table table-responsive table-borderd table-sm">
<thead class="thead-dark">
<tr>
<th>Nuevos Confirmados</th>
<th>Total Confirmados</th>
<th>Nuevos Fallecidos</th>
<th>Total Fallecidos</th>
<th>Nuevos Recuperados</th>
<th>Recuperados</th>
</tr>
</thead>
<tbody id="generar_datos"></tbody>
</table>
</div>
这个想法几乎与我使用
fetch
get 然后显示数据相同,但以不同的方式(我使用for
andforeach
,我不知道这是否会有所不同)。我展示的(代码)是一个例子,这不是我实际在做的,这是我想到的第一件事。
我希望你能帮助我解决这个问题。谢谢!
当数据加载完成时,您可以
await
以清晰简单的方式使用和控制,放置一个 Spinner 或一些通知用户的文本,并在数据加载后隐藏它。如果您想继续使用 Promise 而不是使用
async
andawait
:您只需要添加一个加载样式,这将取决于您希望它从礼物到矢量图像的位置,除此之外,诀窍是使用.then() 功能。
使用.finally()的想法是在服务失败的情况下,我们也将样式返回原样
您可以简单地拥有一个包含您的加载元素的元素,无论是 gif 还是带有 CSS 的动画(如示例中所示),您所做的就是将其隐藏并保持
display: none
其默认状态,然后当您执行函数时在它运行之前获取数据,您将 的属性更改为display
可见的东西,在这种情况下flex
,但它也可以是 的其他值之一display
。加载完成后,您将再次从动画中隐藏您的容器。对于您的情况,您必须包含
fetch
如下函数:这是一个工作示例
我更新了@Sergio 的答案。
您总是必须处理错误情况。
定义以下函数,
主要功能如下。
用语法
then
和catch
最后,请注意。使用装饰器模式进行逻辑分离。
我希望它有效。