如何创建 Bootstrap Spinner 并在屏幕上显示，直到来自 API 的数据加载？

任务是在页面上显示一个微调器，直到来自 API 的数据响应到来。我们已经使用 bootstrap spinner 来展示这个例子。

先决条件：

您将需要一些有关 JavaScript fetch API 的知识。
您将需要一个模拟 API 来获取数据。

方法：

为任务创建必要的 HTML、CSS 和 JavaScript 文件。
在 HTML 文件中，在head 部分链接引导程序。

编程需要懂一点英语

现在从“https://getbootstrap.com/docs/4.4/components/spinners/”中获取任何微调器，我在示例中采用的微调器是：
```
    Loading...
```

现在，一旦从 API 加载数据，就必须停止微调器。
因此，通过Fetch() API 方法从 API获取数据。
将数据存储在响应变量中。
有一个 if 语句可以检查是否来自 API 的响应来了。
如果 Response 来了，则调用函数hideSpinner() 。
在使用DOM 操作的hideSpinner()函数，我们将Spinner 元素的显示设置为 none 。

HTML文件：



  

    
    Spinner
    
    

  

    
        Loading...

JavaScript 文件：

// API url 
const api_url =
"https://mygfgapi.free.beeceptor.com/my/api/path";
  
// Defining async function 
async function getapi(url) {
  
    // Storing response 
    const response = await fetch(url);
  
    // Storing data in form of JSON 
    var apidata = await response.json();
    console.log(apidata);
    if (response) {
        hideSpinner();
    }
    document.getElementById("data").innerHTML
        = `${apidata.data}`;
}
  
// Calling that async function 
getapi(api_url);
  
// Function to hide the Spinner
function hideSpinner() {
    document.getElementById('spinner')
            .style.display = 'none';
}

输出：

您可以在输出窗口中看到，微调加载直到来自 API 的数据到来。

API 链接： “https://mygfgapi.free.beeceptor.com/my/api/path”