Scribd
Cargar
120 vistas6 páginas

JavaScript ES6 Fetch API

El documento describe la API Fetch de JavaScript ES6, la cual permite realizar peticiones AJAX de forma sencilla utilizando promesas. Con Fetch, las peticiones pueden hacerse con una simple instrucción fetch y encadenando promesas, lo que resulta más simple que las peticiones AJAX tradicionales. El documento también muestra un ejemplo de cómo usar Fetch para realizar una petición AJAX y obtener la respuesta.

Cargado por

Fito Prog
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
120 vistas6 páginas

JavaScript ES6 Fetch API

El documento describe la API Fetch de JavaScript ES6, la cual permite realizar peticiones AJAX de forma sencilla utilizando promesas. Con Fetch, las peticiones pueden hacerse con una simple instrucción fetch y encadenando promesas, lo que resulta más simple que las peticiones AJAX tradicionales. El documento también muestra un ejemplo de cómo usar Fetch para realizar una petición AJAX y obtener la respuesta.

Cargado por

Fito Prog
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

JavaScript ES6 fetch API

Hay que reconocer que JavaScript ES6 Fetch API es un avance a la hora de realizar
peticiones AJAX importante comparado con las peticiones AJAX clásicas que eran
insufribles. Hay que recordar que con JavaScript si uno quería hacer una petición AJAX el
código era algo de este estilo:

function cargar() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
.. blabla bla
}
};
xhttp.open("GET", "hola", true);
xhttp.send();
}

Todos terminamos usando el API de jQuery que era claramente superior y a través del uso
de promesas aportaba una gran flexibilidad. El problema en algunos casos de este enfoque
es que a veces nuestro proyecto no necesita obligatoriamente utilizar jQuery y lo acabamos
añadiendo simplemente para simplificar peticiones AJAX o similar. ES6 nos ayuda a
solventar este tipo de problema

JavaScript ES6 fetch API


A partir de JavaScript ES6 disponemos del API de fetch que permite hacer peticiones
asíncronas de forma sencilla apoyándose en un API de promesas.

www.arquitecturajava.com
JavaScript ES6 fetch API

Vamos a verlo en código:

<html>
<head>
<script type="text/javascript" >

window.onload=function() {

var boton=document.getElementById("botonAjax");

boton.addEventListener("click",function() {

fetch("/hola").then(function(respuesta) {

www.arquitecturajava.com
JavaScript ES6 fetch API

return respuesta.text();

}).then(function(texto) {

console.log(texto);
});

});
};
</script>

</head>

<body>
<input type="button" id="botonAjax" value="ajax"/ />
</body>

</html>

En este caso estamos haciendo una petición AJAX usando JavaScript ES6 Fetch API y su
nueva sintaxis. Como podemos ver se trata de una simple instrucción de fetch y un
encadenamiento de promesas. El resultado nos saldrá por la consola

www.arquitecturajava.com
JavaScript ES6 fetch API

Acabamos de configurar nuestra primera petición AJAX con JavaScript ES6 Fetch API ,
podemos tratar también de una forma natural las peticiones que incluyen información en
formato JSON.

fetch("/holaobjeto").then(function(respuesta) {

return respuesta.json();

}).then(function(objeto) {

console.log(objeto.nombre)
})

El soporte del API de fetch cada día es mayor aunque todavía hay algunos navegadores que
tienen problemas con ello revisemos siempre la página de caniuse.

Otros artículos relacionados: JavaScript Promises , JavaScript Prototypes , JavaScript


Memorization

Cecilio Álvarez Caules


Cecilio Álvarez Caules Oracle Java Certified Architect

www.arquitecturajava.com
JavaScript ES6 fetch API

www.arquitecturajava.com
JavaScript ES6 fetch API

www.arquitecturajava.com

También podría gustarte