Ejemplo de Cómo usar `fetch`

La función fetch es una herramienta fundamental en JavaScript para realizar solicitudes HTTP y trabajar con datos de APIs. En este artículo exploraremos un caso práctico utilizando la API pública de Genshin Impact.

Genshin Impact es un videojuego popular que combina acción y exploración en un mundo abierto lleno de personajes únicos y fascinantes. Este juego cuenta con una API pública, lo que significa que cualquiera puede usarla para obtener información sobre sus personajes y otros datos, sin necesidad de autenticarse o usar claves privadas.

En este caso, aprenderemos a usar fetch para extraer el nombre de los personajes y mostrar sus imágenes en una aplicación React desarrollada con TypeScript.

Requisitos previos

Conocimientos básicos de JavaScript: Familiaridad con promesas y manipulación del DOM.
Un entorno de desarrollo: Puede ser un editor de texto como VS Code y un navegador.

¿Qué es `fetch`?

fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP de manera sencilla. Soporta múltiples métodos como GET, POST, PUT y DELETE, lo que lo hace ideal para interactuar con APIs.

Caso práctico: Usar la API de Genshin Impact

La API de Genshin Impact proporciona información sobre personajes del juego. A continuación, veremos ejemplos de cómo usar fetch para interactuar con esta API.

Primero exploramos la documentación de la API, donde podemos visualizar los endpoints, descripción y ejemplos en el siguiente repositorio Documentación API Genshin
Antes de implementar la API en nuestro código, podemos usar Postman para verificar los datos que trae. Postman es una herramienta que facilita la prueba de APIs. Puedes usarlo de forma sencilla, sea en la página o descargando el programa.

Abrir Postran Aquí
Crear una nueva solicitud:
- Haz clic en el botón New Request.
- Selecciona el método GET en la parte superior izquierda.
- Ingresa la URL de la API que quieres probar, por ejemplo:
```
https://genshin.jmp.blue
```
- Haz clic en el botón Send para enviar la solicitud.
- Después de enviar la solicitud, verás la respuesta en la sección Body. Selecciona el formato JSON para visualizar los datos de forma estructurada.
- Como la idea es traer todos los personajes, podemos probar con otro endpoint.
```
https://genshin.jmp.blue/characters/all?lang=en
```
  Postman muestra el estado HTTP (como 200 OK para respuestas exitosas).

Usaremos el proyecto ya utilizado en un artículo anterior Cómo desplegar una aplicación React + Vite usando Vercel

En este proyecto, estamos utilizando React con TypeScript para consumir la API pública de Genshin Impact. Se organiza de forma sencilla

Captura de la estructura del proyecto

Archivo de servicios api.tsx

El archivo api.tsx contiene las funciones necesarias para interactuar con la API.

// URL base de la API
const BASE_URL = 'https://genshin.jmp.blue';

// Obtiene todos los personajes de la API
export const getCharacters = async () => {
  const response = await fetch(`${BASE_URL}/characters/all?lang=en`);

  // Si la respuesta no es exitosa, lanza un error
  if (!response.ok) {
    throw new Error('Error al obtener los personajes.');
  }

  // Retorna los datos en formato JSON
  return response.json();
};

// Obtiene los detalles de un personaje específico usando su ID
export const getCharacterDetails = async (id: string) => {
  const response = await fetch(`${BASE_URL}/characters/${id}?lang=en`);

  // Si la respuesta no es exitosa, lanza un error especificando el ID
  if (!response.ok) {
    throw new Error(`Error al obtener los detalles del personaje con ID: ${id}`);
  }

  // Retorna los datos del personaje en formato JSON
  return response.json();
};

// Genera la URL para obtener la imagen de un personaje
export const getCharacterImage = (id: string, imageType: string = 'card') => {
  return `${BASE_URL}/characters/${id}/${imageType}`;
};

Captura del código

Componente GenshinList.tsx

Este componente muestra una lista de personajes obtenidos de la API. Cada personaje se presenta con su nombre, título e imagen en un formato de cuadrícula.

Captura de codigo

Así nos mostraría los datos en la página web. Captura de la pagina con los datos de la api de genshin

En este artículo, hemos visto una forma funcional de usar fetch para consumir datos de una API, en un ejemplo sencillo.
Te comparto el código, si deseas explorar más endpoints Repositorio