Ejemplos de uso de fetch API en Javascript

La fetch API nos permite acceder a recursos de un servidor de manera asíncrona (peticiones Ajax). Este tipo de peticiones nos permiten realizar solicitudes HTTP sin necesidad de recargar toda la página.

Para utilizar fetch API no es necesario usar ninguna librería. Funcionan haciendo uso del código nativo del navegador.

La API fetch utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a los que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Petición GET

Este tipo de petición (hay otros tipos de peticiones como PUT, POST, DELETE…) se utiliza fundamentalmente para obtener datos de la fuente especificada (habitualmente un servicio web).

Sin parámetros a una API externa

Para este ejemplo, vamos a consultar los datos de la API de StarWars.

fetch('https://swapi.co/api/people/1/')
.then(res => res.json())
.then(res => console.log(res));
.catch( err => console.error(err));
biblioteca.json
[
	{
		"titulo": "La Aventura",
		"autor": "Paco"
	},
	{
		"titulo":"Las cosas",
		"autor": "Pac"
	}
]
  1. Hemos llamado a fetch() con la URL a la que queremos acceder como parámetro. Esta llamada nos devuelve una promesa.
  2. El método then() de esa promesa nos entrega un objeto response.
    A partir de este objeto llamamos al método json() para obtener el cuerpo de la respuesta. Este método json() nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido.
  3. El método then() de esta segunda promesa recibe el cuerpo devuelto por la promesa anterior y hace un log de ella.
  4. Hemos incluido un catch() por si se produce algún error

Sin parámetros a un fichero local

fetch('biblioteca.json')
.then(res => res.json())
.then(res => console.log(data.titulo));

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

Petición POST

La utilizaremos para insertar nuevos registros.

fetch('http://localhost:3009/users', {
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({ mail: 'pp@pp.com', password: '123' })
})
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Petición PUT

La utilizaremos para actualizar información existente.

Enviaremos la información que queremos actualizar en el cuerpo de la petición y la id del elemento que queremos actualizar en la url de la petición.

fetch('http://localhost:3005/users/1', {
        method: 'PUT',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ mail: 'ññññ', password: 'ññññ' })
 })
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Petición Delete

La utilizaremos para eliminar información existente.

fetch('http://localhost:3005/users/2', {
      method: 'DELETE',
})
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Ejercicio Fetch

Haz la siguiente petición:

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

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

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'})
};
← Deconstrucción
Librería modernizr para Javascript →

Aviso Legal | Política de privacidad