Peticiones API con React - Fetch

Herramientas necesarias

• Node
• Next.js
• SWR
• Axios

Instalación

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

Método Fetch nativo de JavaScript

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.