Todos los ejemplos vamos a hacerlos con Next.js asi que procedemos a crear un proyecto base:
#npm
npx create-next-app
# yarn
yarn create next-app
Los programadores de Javascript disponemos de la herramienta Fetch para realizar peticiones HTTP.
Vamos a utilizar la API pública de pruebas JSONPlaceHolder para simular nuestras peticiones, de modo que vamos a nuestro proyecto recién creado con Next, carpeta pages
, archivo index.js
y borramos todo lo que hay, dejando únicamente esto:
export default function Index() {
return <h1>Index</h1>;
}
Ejecutamos en la terminal:
yarn dev
Y comprobamos que todo esté correcto. Deberiamos ver una página simple con el título Index.
Traigamos 100 posts fakes de JSONPlaceHolder y para ello hacemos uso del hook useEffect
:
import { useEffect } from 'react';
export default function Index() {
return <h1>Index</h1>;
}
El hook useEffect
nos permite ejecutar código cuando se inicializa la vista de nuestro componente, en nuestro caso, una página y para ello escribimos:
import { useEffect } from 'react';
export default function Index() {
useEffect(() => {}, []);
return <h1>Index</h1>;
}
Creamos el fetcher que se encarga de hacer la petición dentro del hook:
import { useEffect } from 'react';
export default function Index() {
// Fake API
let url = 'http://jsonplaceholder.typicode.com/posts';
const fetchContent = async () => {
let request = await fetch(url);
if (request.ok) {
let data = await request.json();
console.log({ posts: data });
}
}
useEffect(() => {
fetchContent()
}, []);
return <h1>Index</h1>;
}
Verificamos que la petición sea satisfactoria y procedemos a extraer la información en JSON y a imprimir en consola la respuesta, en nuestro caso, un array de 100 posts.
if (request.ok) {
let data = await request.json();
console.log({ posts: data });
}
Pero lo más probable es que necesitemos manejar los datos de la respuesta en vez de únicamente imprimirlos y para ello vamos a crear un estado con el hook useState
:
import { useEffect, useState } from 'react';
export default function Index() {
// Posts state
const [posts, setPosts] = useState([]);
// Fake API
let url = 'http://jsonplaceholder.typicode.com/posts';
const fetchContent = async () => {
let request = await fetch(url);
if (request.ok) {
let data = await request.json();
console.log({ posts: data });
}
}
useEffect(() => {
fetchContent()
}, []);
return <h1>Index</h1>;
}
Ahora ya podemos acceder a la respuesta desde nuestro componente, asi que pongámoslo a prueba. Creemos una lista que muestra todos los posts:
const PostList = ({ posts }) => (
<ul>
{posts.map((v, idx) => (
<li key={idx}>{v.title}</li>
))}
</ul>
);
Una vez el componente está listo, dirijamos los datos de la respuesta a su respectivo lugar, el estado posts que hemos creado con useState
, para ello añadamos:
import { useEffect, useState } from 'react';
// Posts list Component
const PostList = ({ posts }) => (
<ul>
{posts.map((v, idx) => (
<li key={idx}>{v.title}</li>
))}
</ul>
);
export default function Index() {
// Posts state
const [posts, setPosts] = useState([]);
// Fake API
let url = 'http://jsonplaceholder.typicode.com/posts';
const fetchContent = async () => {
let request = await fetch(url);
if (request.ok) {
let data = await request.json();
setPosts(data);
}
}
useEffect(() => {
fetchContent()
}, []);
return (
<div>
<h1>Index</h1>
<PostList posts={posts} />
</div>
);
}
Vamos a nuestra página, recargamos y deberiamos ver una serie de elementos debajo del título.
Enhorabuena, has hecho una petición fetch
!
En los próximos artículos veremos como hacer peticiones con Axios y una librería muy interesante llamada SWR.