Dag 7

Dag 7 (2-11)

Async en await

Na de presentatie van Joost van vandaag wilde ik graag nog aan de haal met het gebruiken van async en await. Omdat ik de code die ik de vorige dag had geschreven niet wilde overschrijven heb ik hiervoor een nieuw bestand aangemaakt. Ook heb ik gebruik gemaakt van een nieuwe API namelijk de PokéAPI.

Deze code doet grotendeels hetzelfde als de code die ik gister heb geschreven, alleen dan door middel van de async en await keywords. Ook maak ik nu gebruik van een aantal functies op de data uit de API verder op te schonen.

import fetch from "node-fetch";
import {
  firstLetterToUpperCase,
  movesToArray,
  typesToArray,
} from "./modules/functions.js";

const topic = "pokemon";
const url = `https://pokeapi.co/api/v2/${topic}/`;

async function main() {
  const pokemonData = cleanPokemonData(await fetchPokemonData(9)); // Clean the fetched pokemon data.
  console.log(pokemonData); // Log the data to the console.
}

// Recieve the pokemon data based on the provided amount.
async function fetchPokemonData(amount) {
  try {
    let promises = []; // Array to store the promises.
    for (let i = 0; i < amount; i++) {
      promises.push(fetchPokemon(i + 1)); // Push the promises from the fetch pokemon function to the promises array.
    }
    return Promise.all(promises).then((results) => results); // Resolve the array of promises and return it.
  } catch (error) {
    console.log(error);
  }
}

async function fetchPokemon(id) {
  try {
    const response = await fetch(url + id); // Fetch the specific pokemon data with the pokemon id.
    const data = await response.json();
    return data; // Return the data.
  } catch (error) {
    console.log(error);
  }
}

// Function to clean the pokemon data.
function cleanPokemonData(data) {
  let cleanedPokemonData = [];
  data.forEach((pokemon) => {
    cleanedPokemonData.push({
      name: firstLetterToUpperCase(pokemon.name), // Capitilize the first letter of the pokemon name.
      types: typesToArray(pokemon.types), // Turn the types to an array of types.
      weight: pokemon.weight,
      height: pokemon.height,
      image_url: pokemon.sprites.front_default,
      // moves: movesToArray(pokemon.moves)
    });
  });
  return cleanedPokemonData;
}

// Run the main function.
main();

// Capitilize the first letter of a string.
export function firstLetterToUpperCase(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// Change pokemon types into an array.
export function typesToArray(object) {
  let types = [];
  Object.keys(object).forEach((key) => {
    types.push(object[key].type.name);
  });
  return types;
}

// Change pokemon moves into an array.
export function movesToArray(object) {
  let moves = [];
  Object.keys(object).forEach((key) => {
    moves.push([
      firstLetterToUpperCase(object[key].move.name),
      object[key].move.url,
    ]);
  });
  return moves;
}

export default "";

Helpen klasgenoot

Vandaag heb ik verder ook Roel geholpen met het schrijven van zijn implementatie van de fetch API. Hij had namelijk op teams gevraagd naar de persoon die middels chaining een tweede fetch had uitgevoerd met de Star Wars API. Ik heb hem geholpen om iets soortgelijks te doen. Roel deed namelijk een request aan de PokéAPI met een limit. Van deze fetch kreeg hij een antwoord met de links die hij kon gebruiken om de data van de Pokémon te achterhalen.

Bekijk hier wat ik de volgende dag heb gedaan.