在 Fetch API 调用中显示加载动画

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

在 Web 开发中，使用 REST API 是至关重要的环节之一。当我开始使用原生 JavaScript 开发 API 时，我注意到调用和响应之间存在细微的时间差。在用户与网站交互后，向他们展示一些正在发生的事情是一种很好的实践。
因此，本文将指导您如何使用原生 JavaScript 在 fetch API 调用时显示加载动画。
让我们开始吧！

HTML

我们先从HTML开始。

<textarea>获取用户输入。
<button>提交数据。
<h1>显示响应。

我们使用 `<div>` 元素来显示加载动画<div id="loading"></div>。该元素默认是隐藏的。我们将对其进行操作，根据需要显示或隐藏它。

创建加载动画 CSS

使用 Javascript

在function displayLoading()：

• loader.className = "display";这将向添加显示类
  <div id="#loading"></div>，从而实现visibility: visible;

• 我们目前使用setTimeout5 秒后隐藏加载动画。有时可能会出现响应延迟的情况，这时需要增加超时时间。

现在，displayLoading()调用此设置时将显示加载动画，hideLoading()调用此设置时将隐藏加载动画。visibility: hidden;

接下来是剩下的JS代码
。这部分很简单，fetchHandler()就是从API获取数据。

url我使用的是虚拟 URL，无论输入什么内容，它都只会返回“Testing, you are”。

笔在这里。

大家好，我是#codenewbie，开始记录我的学习历程。欢迎提出任何建议！