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