What is a promise in Javascript?

Question

DAD

Asked: 2020-06-24 09:47:14 +0800 CST 2020-06-24 09:47:14 +0800 CST 2020-06-24 09:47:14 +0800 CST

How to show a loading effect before loading the fetch API content with javascript?

772

I have one APIwhere the request is made from a file Javascriptusing fetch.

The issue or the problem is that sometimes there is a lot of data that I need to show and that takes a while to load and even knowing that he is doing the process below, sometimes I doubt if he is executing or not, so I would like that while he API fetchdoes everything the process, first a spinner effect of a gif, png or a design with CSSwhatever, the only thing I would like is to know how to do it, what to use and the rest I could do.

CODE (it's an example not the data I'm using):

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>

The idea is almost the same I use fetchget and then display data but in a different way (I use forand foreach, I don't know if that makes a difference). what I am showing (code) is an example is not what I am actually doing, it was the first thing that came to my mind.

I hope you can help me with this question. Thank you!

4 Answers

Voted

Sergio Gutiérrez · Answer 1 · 2020-06-24T09:54:13+08:00

You can use awaitand control in a clear and simple way when the data load has finished, putting a Spinner or some text that informs the user and hiding it once the data has been loaded.

const cargarDatos = async () => {
    const response = await fetch("https://api.covid19api.com/summary");
    const datos = await response.json();
    
    // Fuerzo artificialmente a que dure más para que se pueda observar el Spinner
    await accionAsincrona();
    
    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>`

        // línea ocultando el spinner
    document.getElementById("spinner").style.display="none";
    document.getElementById('generar_datos').innerHTML= cadena;
}

const accionAsincrona = async () => {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 3000);
  });   
}

cargarDatos();

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid black;
  border-color: black transparent black transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<html>
<head>

</head>

<body>
<div id="spinner">
  <div class="lds-dual-ring">&nbsp</div>
</div>
  
  <table id="generar_datos">
  
  </table>
  
</body>
</html>

If you want to keep using promises instead of using asyncand await:

fetch("https://api.covid19api.com/summary")
    .then((response) => response.json())
    .then(async (datos) => {
            // Fuerzo artificialmente a que dure más para que se pueda observar el Spinner
        await accionAsincrona();
        
        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>`;
        
        // línea ocultando el spinner
            document.getElementById("spinner").style.display="none";
        document.getElementById('generar_datos').innerHTML= cadena;
        
        // Añadir línea de código ocultando el mensaje de cargando
    })
    .catch(error => console.error('Error:', error));


const accionAsincrona = async () => {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 3000);
  });   
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid black;
  border-color: black transparent black transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<html>
<head>

</head>

<body>
<div id="spinner">
  <div class="lds-dual-ring">&nbsp</div>
</div>
  
  <table id="generar_datos">
  
  </table>
  
</body>
</html>

JackNavaRow · Answer 2 · 2020-06-24T10:06:43+08:00

You just have to add a loading style and it will depend on where you want it to look from a gift to a vector image, and in addition to this the trick for this is to use the .then() features .

The idea of using .finally() is in case the service fails, we also return the styles as they were

const $tabla = document.getElementById('generar_datos');
const $cargando = document.getElementById("cargando");
$cargando.style.display = 'block'
$tabla.parentElement.style.display = 'none'
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>`
      $tabla.innerHTML= cadena
  })
  .catch(error => console.error('Error:', error))
  .finally(()=>{
    $cargando.style.display = 'none';
    $tabla.parentElement.style.display = 'block';
  })

<div id="cargando" style="display:block" >Cargando</div>
<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>

In javascript, the ' ' sign is usually prefixed $to know that the variable is a DOM element.

Daniel Rodríguez Meza · Answer 3 · 2020-06-24T10:02:53+08:00

You can simply have an element that contains your load element, be it a gif or an animation with CSS (as in the example) and what you do is keep it hidden with display: nonethat should be its default state, then when you execute your function to fetch data just before it runs you change the property of displayto something visible, in this case flex, but it could just as well be one of the other values of display. Once the load is finished you hide your container from the animation again.

For your case you would have to wrap fetchin a function like this:

function fetchData() {
  /* Mostrar contenedor de carga */

  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;

    /* Ocultar contenedor de carga */
  })
  .catch(error => console.error('Error:', error));
}

Here is a working example

function fetchData() {
  const loader = document.getElementById('loader');

  loader.style.display = 'flex';

  setTimeout(() => {
    loader.style.display = 'none';
  }, 2000);
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    background: cadetblue;
}

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button onclick="fetchData()">Cargar datos</button>
  <div class="loader-container" id="loader">
    <div class="loader"></div>
  </div>
</body>
</html>

VRoxa · Answer 4 · 2020-06-24T10:28:07+08:00

I update @Sergio's answer.

You always have to deal with the error case .

Defining the following functions,

const showLoading = _ => {
    // Aquí se muestra el GIF, PNG
    // spinner, etc ...
}

const showError = error => {
    // Aquí se muestra el error
    // (si se necesita...)
}

const showData = data =>  {
    // Aquí se tratan los datos obtenidos
    // por la llamada HTTP
}

const hideLoading = _ => {
    // Aquí se oculta de nuevo
    // el PNG, GIF, etc.
}

The main function would be as follows.

const load = async _ => {
    showLoading();

    try {
        const response = await fetch('...');
        const data = await response.json();
        showData(data);
    } catch (e) {
        showError(e);
    }

    // Haya excepción o no, el "loading" debe desaparecer.
    hideLoading();
}

with syntax thenandcatch

const load = _ => {
    showLoading();
    fetch(`...`)
        .then(response => response.json())
        .then(showData)
        .catch(showError)
        .then(hideLoading); // Haya excepción o no, el "loading" debe desaparecer.
}

And finally, for note. Use a decorator pattern for logic separation.

const wrapWithLoading = callback => 
    async _ => {
        showLoading();
        await callback();
        hideLoading();
    }

const load = wrapWithLoading(async () => {
    try {
        const response = await fetch('...');
        const data = await response.json();
        showData(data);
    } catch (e) {
        showError(e);
    }
});

I hope it works.

How to show a loading effect before loading the fetch API content with javascript?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?