Javascript, Fetch API


Javascript, Fetch API | jazdian

phone

“La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado XMLHttpRequest, pero la nueva API ofrece un conjunto de características más potente y flexible.

Fetch ofrece una definición genérica de los objetos Request y Response (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación. ”

MDN Web Docs

Fetch API es el Jquery-Ajax de Javascript si se me permite esta comparación pues, es sencilla, facil y potente en su uso. Realmente me sorprendió mucho cuando la empezé a usar sin tantas complicaciones. En esta ocación vamos usar PHP y Fetch API:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Codigos de Javascript</title>

        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    
    <div class="container">
        <div class="row">
            <h5>Edición de celulares</h5>
            <br>
            <br>
            <div class="row">
                <div class="row">
                    <div class="input-field col s3">
                      <input placeholder="Ingrese datos nuevos" id="val1" type="text">
                      <label for="val1">Val 1</label>
                    </div>
                    <div class="input-field col s3">
                      <input id="val2" type="text">
                      <label for="val2">Val 2</label>
                    </div>
                    <div class="input-field col s3">
                        <input id="val3" type="text">
                        <label for="val3">Val 3</label>
                    </div>
                    <div class="input-field col s3">
                        <button id="guardar" class="btn waves-effect waves-light pink darken-2" type="submit" name="action">
                            <i class="material-icons center">add_circle</i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="MiTablaServer" style="display: none; ">
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="app3.js"></script>
    <!-- <script src="app.js"></script>

</body>
</html>

Como se puede ver estamos usando un frameworks de CSS (materialize).

En el HTML tenemos 3 inputs y un button, asi sencillo sin complicarnos. Además estamos llamandos un archivo de javascript llamado “app3.js” también nada complicado. Para no hacer esto aburrido analicemos ahora el código javascript que está en el “app3.js”.

// Creamos un objeto con nuestros inputs y el botón. 
const e = {
    buttonGuardar: document.querySelector('#guardar'),
    val1: document.querySelector('#val1'),
    val2: document.querySelector('#val2'),
    val3: document.querySelector('#val3')
}

// Creamos otro objecto con las métodos
const f = {

    run: () => {
        e.buttonGuardar.addEventListener('click', f.addNewReg);
    },

    addNewReg: ()=>{
        var data = new FormData();
        data.append('metodo', 'add_regisitro');
        data.append('val1', e.val1.value);
        data.append('val2', e.val2.value);
        data.append('val3', e.val3.value);

        fetch('fetch.php', { method: 'POST', body: data })
        .then( function (res) {
            return res.json();            
        })
        .then(function (data) {
           M.toast({html: data[0].messege})
        })
    }
}

f.run();

Nuevamente podemos decir que esto esta sin complicaciones. Pero permitanme explicar lo que se hizo por si alguien todavía tiene una duda.

Primero creamos un objecto en una constante llamada “e” const e = { ... }; a nuestro objecto le agregamos unas propiedades, la asociación entre su clave y valor. Nos invetamos unas claves o nombres y como valor le asignamos los elementos input y button:
clave: valor
val1: document.querySelector('#val1')
Creo que hasta aquí todo bien. Pero como pueden notar creamos otro objecto llamado “f” const f = { ... } y alli agregamos funciones como propiedades.

El objecto “f” contiene dos propiedades con sus claves y como sus valores dos funciones o métodos; el primer run: () => { ... } y otro llamado addNewReg: () => { ... }; estamos usando funciones de flecha * (que se explicaran en otro momento). Si son observadores verán que hasta el final de codigo javascript estamos llamando la función “run” desde el objecto “f” f.run();. La función “run” agrega el evento ( f.addNewReg ) “click” al “button” .

Código PHP

class DatosPhp
{
    public function InsertCel( $val1, $val2, $val3 )
    {
        // Solo vamos a emular que insertamos un registro a la base
        // y le regresamos un json string.
        $vals = "$val1 - $val2 - $val3";
        return '[{"id":12,"code":"1","messege":"Inserted $vals"}]';

    }
}

if(isset($_POST['metodo']) && $_POST['metodo'] == 'add_regisitro')
{
   $da = new DatosPhp();
   $post = $_POST;
   $dats = $da->InsertCel($post['val1'], $post['val2'], $post['val3']);

    echo $dats;
}

El archivo fetch.php valida si hay un post: if(isset($_POST['metodo']) && $_POST['metodo'] == 'add_regisitro') La clave “metodo” del post viene de FormData() que creamos en javacrip, si existe el post “metodo” y su valor es “add_regisitro” entonces instanciamos la clase DatosPHP() y ejecutamos el método InsertCel(...) el metodo nos retorna una cadena de texto json y esta se la mandamos en el echo $dats; que recibira el “fetch” y lo convertira a un objeto json.

Al agregar un registro nos devuelve una confirmación

Como ven no es muy ccomplicado usar Fetch API. Por último le comento que el código de javascript M.toast({html: data[0].messege}) * un una funcion del frameworks “materialize” que recibe un mensaje “html” que es el que viene de php en el parámetro “data”.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *