No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Introducción a PokeAPI

7/22
Recursos

Aportes 13

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Usando async await:

import axios from 'axios';

export const getPokemons = async () => {
	try {
		const { data } = await axios.get(
			'https://pokeapi.co/api/v2/pokemon?limit=151'
		);
		console.log(data.results);
		return data.results;
	} catch (error) {
		console.error('There was an error: ', error);
	}
};

Con async/await es más fácil

solo se debe escibir la función getPokemon de esta manera:

export const getPokemon = async () => {
  try {
    const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=151')
return data
  } catch (error) {
    console.error(error.message)
  }
}

Y dentro de App.jsx en el useEffect solamente se ejecutaría la función:

useEffect(() => {
  getPokemon()
}, [])

Para los que esten trabajando con TypeScript y Vite, mi codigo esta así: (cualquier duda o aporte comenten)

// App.tsx
import { useEffect, useState } from 'react'
import { Col } from 'antd'
import { Search } from './components/Search'
import { PokemonList } from './components/PokemonList'
import { getPokemons } from './api'
import logo from './statics/logo.svg'
import './App.css'

function App() {
  const [pkmns,setPkmns] = useState([]);
  useEffect(()=>{
    async function fetchPokemon(){
      const pokemons = await getPokemons();
      setPkmns(pokemons)
    } 
    fetchPokemon();
  },[])
  return (
    <div className="App">
      <Col span={4} offset={10}>
        <img src={logo} alt="Pokedux" />
      </Col>
      <Col span={8} offset={8}>
        <Search />
      </Col>
      <PokemonList pokemons={pkmns} />
    </div>
  )
}

export default App

// index.ts
import axios from "axios";

type PokemonType = {
    name: string;
    url : string
}

type GetPokemonsResponse = {
    results: PokemonType[]
}

export const getPokemons = async ()=>{
    try {
        const { data } = await axios.get<GetPokemonsResponse>('https://pokeapi.co/api/v2/pokemon?limit=151');
        return data.results;
    } catch (err) {
        console.error(err);
    }
}
// PokemonList.tsx
import { FC } from "react";
import { PokemonCard } from "./PokemonCard";
import './PokemonList.css'

export interface IPokemon{
    name: string
    url: string
}

interface Props {
    pokemons: IPokemon[]
}

const PokemonList:FC<Props> = ({ pokemons }) =>{
    console.info(pokemons)
    return (
        <div className="PokemonList">
            {pokemons.map((pokemon,index)=>(
                <PokemonCard url={pokemon.url} name={pokemon.name} key={pokemon.name} />
            ))}
        </div>
    )
}

PokemonList.defaultProps = {
    pokemons: Array(10).fill('')
}

export {
    PokemonList
}
// PokemonCard.tsx
import { FC } from "react";
import { StarOutlined } from "@ant-design/icons";
import { Card } from "antd";
import Meta from "antd/lib/card/Meta";
import { IPokemon } from "./PokemonList";

const PokemonCard:FC<IPokemon> = ({name, url}) => {
    console.info(name)
    return (
        <Card
            title={name}
            cover={<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png" alt="Ditto" />}
            extra={<StarOutlined />}
        >
            <Meta description="fire, fairy" />
        </Card>
    )
}

export {
    PokemonCard
}

api/index.js

import axios from "axios";

const API_URL = 'https://pokeapi.co/api/v2/pokemon?limit=151';
export const getPokemon = () => {
    return axios
        .get(API_URL)
        .then((response) => response.data.results)
        .catch((error) => console.error(error));
}

Os dejo un enlace muy interesante sobre el manejo de asincronía en useEffect

Hola tengo un error al usar key = { pokemon . name } no me salen los nombres y sigue saliendo el warning en consola. Help me pls

## Con Fetch (en api/index.js) ```js const getPokemons = async () =>{ try{ const response = await fetch(API_URL + LIMIT); if(!response.ok){throw new Error("HTTP-Error: "+response.status)}; const data = await response.json(); console.log(data.results); return data.results; } catch(err){ console.log('error', err); } } ```
Implementacion del llamado al API utilizando `fetch` Asi evitamos instalar el modulo de Axios ```js export const getPokemons = async () => { console.log("getting...") const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=3&offset=0') const data = await response.text(); const result = JSON.parse(data); return result; } ```
Para que salgan las imagenes en lugar de dittos puedes modificar un poco el componente de las cards A mí me quedó así: `import { Card } from "antd";` `import Meta from "antd/es/card/Meta";` `import { StarOutlined } from "@ant-design/icons";` `import "./../style/pokecard.css";` `const pokeImage = (pokemonIndex) =>` `` `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png`;`` `const PokeCard = ({ pokemonInfo: { name, url } }) => {` ` const index = url.split("/")[6].split(".")[0];` ` const pokemonUrl = pokeImage(index);` ` return (` `
` ` <Card` ` title={name}` ` cover={<img src={pokemonUrl} alt={name} extra={<StarOutlined />} />}` ` extra={<StarOutlined />}` ` >` ` <Meta description={name}></Meta>` ` </Card>` `
` ` );` `};` `export default PokeCard;`

A mi no me pinta el name en el componente card:

App.js

import { useEffect, useState } from 'react';
import { Col } from 'antd';
import SearchBar from './components/SearchBar';
import PokemonList from './components/PokemonList';
import { getPokemons } from './api';
import logo from './statics/logo.svg';
import './App.css';

function App() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemons();
      setPokemons(pokemonsRes);
    };

    fetchPokemons();
  }, []);

  return (
    <div className='App'>
      <Col span={4} offset={10}>
        <img src={logo} alt='Pokedux' />
      </Col>
      <Col span={8} offset={8}>
        <SearchBar />
      </Col>
      <PokemonList pokemons={pokemons} />
    </div>
  );
}

export default App;

/api/index.js

import axios from 'axios';

const getPokemons = () => {
  return axios 
  .get('https://pokeapi.co/api/v2/pokemon?limit=151')
  .then((res) => console.log(res.data.results))
  .catch((err) => console.log(err));
}

export { getPokemons };

Pokemonlist.jsx

import PokemonCard from './PokemonCard';

const PokemonList = ({ pokemons }) => {
  return (
    <div className='PokemonList'>
      {pokemons.map((pokemon) => {
        return <PokemonCard name={pokemon.name} key={pokemon.name} />;
      })}
    </div>
  );
};

PokemonList.defaultProps = {
  pokemons: Array(10).fill(''),
};

export default PokemonList;

Esta sección es una joya

useEffect(() => {
    const fetchPokemons = async () => await getPokemos();
    fetchPokemons();
  }, []);

Normalmente existe una mala práctica de usar el async sin escalas en el useEffect, en linters estrictos esto truena y más si es en equipo colaborativo, el trabajo con promesas es una joya, me está encantando este curso, buen remake, que diga excelente remake.

Este video no se ve desde la aplicación movil de platzi