PokeApi Integration - Tylung/vue-apuntes GitHub Wiki

Integración de la PokemonApi

Primero llamamos a la instancia de axios desde el archivo @/api/pokemonApi

import pokemonApi from '@/api/pokemonApi';

Contenido del archivo pokemonApi:

import axios from 'axios'

const pokemonApi = axios.create({
    baseURL: 'https://pokeapi.co/api/v2/pokemon'    
})

export default pokemonApi

La función getPokemons crea un arreglo de 650 de lenght y lo rellena con numeros, del 1 al 650, son 650 porque es la cantidad de pokemones que tienen imagen en el Api

export const getPokemons = () => {

    const pokemonsArr = Array(650).fill(null)

    return pokemonsArr.map( ( _, index ) => index + 1 )
}

La función getPokemonNames recibe un arreglo de 4 numeros, esos numeros serán los id de los pokemons y crea un array de promesas, estas promesas realizan una petición a la PokemonApi y todas se resuelven con un promise.all y al final se retorna un arreglo de los nombres de los pokemones y su respectivo id

export const getPokemonNames = async ( [a, b, c, d  ] = [] ) => {

    const arrPromises = [
        pokemonApi.get(`/${ a }`),
        pokemonApi.get(`/${ b }`),
        pokemonApi.get(`/${ c }`),
        pokemonApi.get(`/${ d }`)
    ]

    const [p1, p2, p3, p4 ] = await Promise.all( arrPromises )

    return [
        { name: p1.data.name, id: p1.data.id},
        { name: p2.data.name, id: p2.data.id},
        { name: p3.data.name, id: p3.data.id},
        { name: p4.data.name, id: p4.data.id}
    ]
}

La funcion getPokemonOptions realiza la funcion getPokemonNames a un arreglo de 4 numeros con valores random y retorna el arreglo de objetos con la infomación de esos 4 pokemones

const getPokemonOptions = async () => {

    const mixedPokemons = getPokemons().sort( () => Math.random() - 0.5 )

    const pokemons = await getPokemonNames( mixedPokemons.splice(0, 4) )

    return pokemons
}

Al final del archivo se exporta de manera default la funcion getPokemonOptions

export default getPokemonOptions

Y se manda a llamar en el PokemonPage.vue

import getPokemonOptions from '@/helpers/getPokemonOptions'

Y se utiliza en el método mixPokemonArray()

  async mixPokemonArray() {
            this.pokemonArr = await getPokemonOptions()

            const rndInt = Math.floor( Math.random() * 4 )
            this.pokemon = this.pokemonArr[rndInt]
    },