Índice del curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

fetch

Las peticiones fetch permiten hacer peticiones a un servidor cuyos resultados serán gestionados mediante promesas.

Ejemplos de uso de fetch

Petición GET sin parámetros a una API externa

fetch('https://swapi.co/api/people/1/')
.then(res => res.json())
.then(callback);

function callback(data){
	console.log(data)
}

Petición GET sin parámetros a un fichero local

fetch('biblioteca.json')
.then(res => res.json())
.then(callback);

function callback(data){
	console.log(data.titulo)
}

En un documento JSON correcto, los nombres de las propiedades deben ir entre comillas dobles.

biblioteca.json[
	{
		"titulo": "La Aventura",
		"autor": "Paco"
	},
	{
		"titulo":"Las cosas",
		"autor": "Pac"
	}
]

Petición POST con parámetros

fetch('http://localhost:13289/escenas/recuperar_escenas_obra', {
    method:'POST',
	headers: {
		"Content-Type": "application/json",
         },
    body:JSON.stringify({id:1})})
    .then(res => res.json())
    .then(escenas => {
      console.log(escenas);
    });

Ejercicio Fetch

Haz la siguiente petición:

https://swapi.co/api/people/

y recorre el resultado pata mostrar una lista con los datos recuperados

Ver ejemplo

Codigo para simplificar las peticiones

const API_URL = 'http://localhost:13289';

const fetchData = (url, options = {}) => {
  return fetch(API_URL + url, {
    headers: {
      'Content-Type': 'application/json'
    },
    ...options,
  }).then(res => res.json())
};

export const getJson = (url, params) => {
  const urlParams = params && Object.entries(params)
    .reduce((acc, [name, value]) => `${acc}${name}=${value}&` , '?')
    .slice(0, -1);
 return fetchData(url + urlParams);
};

export const postJson = (url, params) => {
  return fetchData(url, {
    method: 'POST',
    body:JSON.stringify(params)
  });
};
Para usarlo:import {getJson, postJson} from "../http";
  const escenas2 = getJson('/escenas/recuperar_escenas_obra', {id: 1, amor: 'mucho'})
};

Promise

Las promesas nos permiten gestionar código asincrónico. Las promesas de Javascript nativo, son similares a las promesas de jquery.

$.get('url.php', callback);

Antes de tener disponibles las promesas nativas para gestionar estas peticiones asíncronas, teníamos que usar este código:

function get(url, callback) {
	var req = new XMLHttpRequest();
	req.open('GET', url);

	req.onload = function() {
		if (req.status === 200) {
			callback(req.response);
		}
	};

	req.send();
}

get('url.php', callback)

El equivalente con promesas nativas de Javascript, sería esto:

fetch('url.php').then(callback);

Crear una promesa (ejecutar una función de forma asincrónica)

En Javascript todo el código es sincrónico. Las funciones asincrónicas se ejecutas después de las asincrónicas (no entre medias).

Definimos una función sincrónica

const add = (num1, num2) => num1 + num2;
const makeSumPromise = () => new Promise((resolve) => {
	resolve(add(3,2))
});

num contendrá el valor que devuelve el resolve

makeSumPromise.then(num => )

La función fetch devuelve una promesa

let promesa = fetch('url.php');
promesa.then(...)

Promise.race

Este método nos permite evaluar varios códigos (request, timeoutPromise, ...) creados a partir de la API de de Promise. El que termine de ejecutarse antes es el que se guardará como valor de retorno de la promise.

En el siguiente ejemplo, hago una carrera entre dos promises. Si la promise request tarda más que la promise timeoutPromise, el valor devuelto será el que devuelva un timeout.

Promise.race([
	request, // 1s
	timeoutPromise, // 0.5s

]).then((res) => {
	clearTimeout(timeoutId);
	return res;
});


const request = fetch(path); //El método fetch devuelve una promesa

const timeoutPromise = createRequestTimeout(setTimeoutReference);

let timeoutId;

const setTimeoutReference = (timeout) => { timeoutId = timeout; };

const createRequestTimeout = setTimeoutReference => new Promise((resolve, reject) => {
	setTimeoutReference(setTimeout(() => {
		reject(createHttpError({
			statusCode: 504,
			statusMessage: 'Request timeout error',
		}));
	}, 10000));
});
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!