Ejemplos de uso de fetch API en Javascript

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

Petición GET

La utilizaremos para recuperar información del servidor.

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)
}

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

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

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

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'})
};