如何创建自举程序微调器并在屏幕上显示直到加载来自API的数据？

任务是在页面上显示微调框，直到API的数据响应到来为止。我们采用了引导程序微调程序来显示示例。

前提条件：

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

方法：

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

• 现在，从“ https://getbootstrap.com/docs/4.4/components/spinners/”中获取任何微调器。我以该示例为例的微调器是：

  
      Loading...
  
  

• 现在，一旦来自API的数据加载，微调器将必须停止。
• 因此，可以通过Fetch()API方法从API获取数据。
• 将数据存储在响应变量中。
• 有一个if语句，用于检查API响应是否到来。
• 如果响应来了，那么有一个函数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”