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"
}
]- Hemos llamado a fetch() con la URL a la que queremos acceder como parámetro. Esta llamada nos devuelve una promesa.
- 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. - El método then() de esta segunda promesa recibe el cuerpo devuelto por la promesa anterior y hace un log de ella.
- 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'})
};