La tarea es mostrar una rueda giratoria en la página hasta que llegue la respuesta de datos de la API. Hemos tomado bootstrap spinner para mostrar el ejemplo.
Requisito previo:
- Necesitará algunos conocimientos sobre la API de recuperación de JavaScript .
- Necesitará una API simulada para obtener datos.
Acercarse:
- Cree el archivo HTML, CSS y JavaScript necesario para la tarea.
- En el archivo HTML, enlace bootstrap en la sección principal.
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” integridad=”sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anónimo” >
- Ahora tome cualquier spinner de » https://getbootstrap.com/docs/4.4/components/spinners/ «. El spinner que tomé para el ejemplo es:
<div class="spinner-border text-primary" id="spinner"role="status"> <span class="sr-only">Loading...</span> </div>
- Ahora, el control giratorio deberá detenerse una vez que se carguen los datos de la API.
- Por lo tanto, obtenga los datos de la API mediante el método API Fetch().
- Almacene los datos en una variable de respuesta .
- Hay una instrucción if que verifica si la respuesta de la API llegó o no .
- Si llegó la respuesta, entonces se llama a la función hideSpinner() .
- En esa función hideSpinner() al usar la manipulación DOM , configuramos la visualización del elemento Spinner en none .
archivo HTML:
<!DOCTYPE html> <html> <head> <script src="script.js"></script> <title>Spinner</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="spinner-border text-primary" id="spinner" role="status"> <span class="sr-only">Loading...</span> </div> <div id="data"></div> </body> </html>
Archivo 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
= `<h1>${apidata.data}</h1>`;
}
// Calling that async function
getapi(api_url);
// Function to hide the Spinner
function hideSpinner() {
document.getElementById('spinner')
.style.display = 'none';
}
Producción:
Puede ver en la ventana de salida, el control giratorio se carga hasta que llegan los datos de la API.
Enlace API: “https://mygfgapi.free.beeceptor.com/my/api/path”