Listado completo de tutoriales

ES6 - API fetch (recuperar archivo de texto)

En el concepto anterior presentamos el API fetch para recuperar datos de un servidor web. Vimos que en la primer promesa cuando se cumple procedemos a convertir los datos enviados a formato JSON:

  fetch("datos.php")
      .then(response=>response.json())
      .then(datos=>console.log(datos));

Veremos otro método que nos permite convertir los datos devueltos a formato de texto, para ello utilizamos el método 'text()' en lugar de 'json()'.

Veremos una pequeña aplicación que muestre 3 botones con diferentes signos del zodiaco, cuando se presiona el botón procedemos a requerir al servidor un archivo de texto.

pagina1.html

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <div>
        <button id="boton1">Aries</button>
        <button id="boton2">Tauro</button>
        <button id="boton3">Geminis</button>
    </div>
    <div id="contenido"></div>

    </div>
    <script>
        document.getElementById("boton1").addEventListener("click", () => mostrar('aries.txt'));
        document.getElementById("boton2").addEventListener("click", () => mostrar('tauro.txt'));
        document.getElementById("boton3").addEventListener("click", () => mostrar('geminis.txt'));


        function mostrar(signo) {
            fetch(signo)
                .then(response => response.text())
                .then(datos => document.getElementById("contenido").innerText = datos);
        }

    </script>

</body>

</html>

Recordar que para probar estos ejercicios debemos tener instalado un servidor web en nuestro equipo y hacer las peticiones via localhost.

En la carpeta del servidor se debe tener almacenadas los 4 archivos, el html y los 3 archivos txt:

pagina1.html
aries.txt
tauro.txt
geminis.txt

Inmediatamente la página se encuentra cargada en el navegador enlazamos el evento click para cada uno de los botones indicando que se debe llamar la función 'mostrar' con el nombre del archivo de cuenta a recuperar:

        document.getElementById("boton1").addEventListener("click", () => mostrar('aries.txt'));
        document.getElementById("boton2").addEventListener("click", () => mostrar('tauro.txt'));
        document.getElementById("boton3").addEventListener("click", () => mostrar('geminis.txt'));

La función 'mostrar' hace la petición al servidor y cuando recibe la respuesta convierte los datos recibidos a formato texto. Finalmente luego de la transformación a formato texto pasamos a mostrarlo dentro de una marca 'div':

        function mostrar(signo) {
            fetch(signo)
                .then(response => response.text())
                .then(datos => document.getElementById("contenido").innerText = datos);
        }

Nuevamente podemos comprobar la sencillez que es recuperar un recurso de nuestro servidor, convertirlo a formato texto y proceder a actualizar la página en forma dinámica.

Retornar