Consumo de APIs con fetch: PokeApi

Curso de React Native: Manejo de Listas y Consumo de APIs

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:21

Consumo de APIs con fetch: PokeApi

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 5 de 17

Clase 5 / 17

Kevin Parra Lopez

Hace 4 años

Yo module bastante esta parte, me gusta tener todo archivo con una sola responsabilidad

Instalamos dotenv

yarn add -D react-native-dotenv

Creamos un archivo .env en la raiz del proyecto

REACT_APP_API_POKEMON=https://pokeapi.co/api/v2/pokemon

Creamos una carpeta Helpers y creamos un archivo llamado DeleteEmptyKeys que se va a encargar de limpiar las keys vacías de un objeto

/* eslint-disable no-param-reassign */

/**
 * Descripcion del helper: Este helper se encarga de eliminar los keys que estén vacíos dentro de un objeto, detecta los nulls o los false.
 *
 * Implementacion: Se importa y se pasa como parametro el objeto.
 *
 * Bugs: 0
 */

// Esta función recibe un objeto y elimina las llaves vacías,
// asignando el valor de la llave a los valores verdaderos.
const DeleteEmptyKeys = (obj) => {
  return Object.keys(obj).forEach((key) => {
    // Recorre cada una de las llaves del objeto
    if (obj[key] === null || obj[key] === "") {
      // Si el valor es falso, nulo o vacío
      delete obj[key]; // Elimina la llave del objeto
    }
    if (obj[key] === true) {
      // Si el valor es verdadero
      // obj[key] = key; // Asigna el valor de la llave al valor del objeto
    }
  });
};

export default DeleteEmptyKeys;

Creamos un archivo constants para tener los types y evitar typos

import { REACT_APP_API_POKEMON } from "@env";

export const API_POKEMON = REACT_APP_API_POKEMON;

Creamos una carpeta llamada services y dentro un archivo llamado api.services.js

import { API_POKEMON } from "../constants/pokemon.types";

// Otros
import DeleteEmptyKeys from "../helpers/DeleteEmptyKeys";

async function callApi(endpoint, options) {
  // Se agregan cabeceras al objeto de opciones pasado como parámetro.
  options.headers = {
    "Content-Type": "application/json",
    Accept: "application/json",
    ...options.headers,
  };

  // Se guarda la URL de la API en una variable.
  const url = endpoint;

  // Se realiza la llamada a la API y se obtiene una respuesta.
  const response = await fetch(url, options);

  // Se convierte la respuesta a formato JSON.
  const data = await response.json();

  if (!response.ok || data.error) {
    throw new Error(data);
  }

  // Se devuelven los datos obtenidos de la API externa.
  return data;
}

const api = {
  pokemons: {
    getAllPokemons(filters) {
      DeleteEmptyKeys(filters);
      const url = new URL(API_POKEMON);
      const params = new URLSearchParams(filters);
      url.search = params.toString();

      return callApi(`${url}?${params.toString()}`, {
        method: "GET",
        redirect: "follow",
      });
    },
  },
};

export default api;

Y usamos eso para hacer la llamada dentro del componente

import { SafeAreaView, Text } from "react-native";
import React, { useEffect, useState } from "react";

// Componentes

// Servicios
import api from "../services/api.services";

const PokedexScreen = () => {
  // Estados
  const [data, setData] = useState({
    loading: false,
    data: {},
    error: null,
  });

  const [filters, setFilters] = useState({
    limit: 1,
    offset: 0,
  });

  // Funciones
  const getData = async () => {
    setData({ loading: false, error: null });

    try {
      const data = await api.pokemons.getAllPokemons(filters);
      console.log(data);
      setData({ loading: false, data });
    } catch (error) {
      console.error(error);
      setData({ loading: false, error });
    }
  };

  // UseEffects
  useEffect(() => {
    if (!Object.keys(data.data).length) getData();
  }, []);

  if (data.loading === true) {
    <SafeAreaView>
      <Text>Cargando...</Text>
    </SafeAreaView>;
  }

  return (
    <SafeAreaView>
      <Text>item</Text>
    </SafeAreaView>
  );
};

export default PokedexScreen;

Comentarios (18)18 comentarios

Beto Martinez

Hace 5 años

Luis Fernando Pedroza Taborda

Stiven Jiménez

Adrian Dalí

Luis Felipe Del Risco Racero

Luis Alejandro Nieto Ruth

Gonzalo Caminos

Wilson Fabian Pérez Sucuzhañay

Octavio Villavicencio Cruz

José Gregorio Estrada Meneses

Luis Eduardo

Roberto Enrique Ajuchan Lopez

Eliezer Mas Y Rubi

Jorge Ivan Meza

walter ivan reynoso fernandez

Hace 3 años

Miguel Hernández

Juan Valentin Perdomo Bonilla

jilma Jemimah Cavero de Arango

Ivan Camilo Hernandez

Luciana Durand

Josué Ramírez Hernández

Jose David Nuñez Procchio

Luis Enrique Rendon Cortez

Alfonso Andres Zapata Guzman

Daniel Briceño

Leibniz Moreno

Moises Abel Avila Garcia

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación

Consumo de APIs con fetch: PokeApi

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon