Solución al reto del curso con async/await & fetch

80977

El curso de Asincronismo con JavaScript se basa en resolver un problema de maneras distintas. De esta forma, se ve la evolución del asincronismo desde los callbacks hasta el uso de async/await.

Sin embargo, no se usa fetch. Se usa un método viejo para hacer llamadas a servidores web, este método es XMLHttpsRequest. El problema de esto es que este método ya no se usa y hoy en día usamos Axios o fetch para hacer peticiones u otras acciones a servidores web.

Por esa razón, en este tutorial te voy a mostrar como resolver el problema mostrado en el curso con el uso de fetch y async/await. En otras palabras, de la manera “moderna”.

<h1>Descripción del problema</h1>

El problema que queremos resolver es conseguir información de la API de Rick and Morty, la seria animada. Nuestro objetivo es conseguir

La cantidad de personajes
El nombre del primer personaje
El origen de este primer personaje

El plan seria hacer 3 llamados distintos. El primero seria al endpoint https://rickandmortyapi.com/api/character/ para conseguir la cantidad de personajes.
Después, haríamos otro llamado al endpoint https://rickandmortyapi.com/api/character/1 para obtener información del primer personaje. Este ultimo endpoint nos regresa la url para hacer el llamado final para conseguir el origen del personaje.

Te recomiendo usar postman para analizar toda la información que recibimos de estos endpoints.

<h1>Creando la función “fetchData”</h1>

Como su nombre lo indica, esta función va ser la encargada de usar fetch y retornar cierta información. La idea de esta funcion es que la podamos reutilizar para las tres peticiones que haremos.

asyncfunctionfetchData(endpoint){
    try{
        const res = await fetch(endpoint)
        return res.json()
    } catch(err){
        return err;
    }
}

Ya podemos ver que estamos usando async/await, así como try/catch para hacer esta petición.

<h1>Haciendo las tres peticiones dentro de la función resolveRequests</h1>

Finalmente, vamos a crear la función resolveRequests que será la encargada de darnos las tres respuestas que necesitamos para completar el reto.

const API = "https://rickandmortyapi.com/api/character/"

async function resolveRequests(){
    const firstRq = await fetchData(API)
    console.log( "Number of characters:", firstRq.info.count )

    const secondRq = await fetchData(API + firstRq.results[0].id)
    console.log( "First character name", secondRq.name )

    const lastRq = await fetchData(secondRq.origin.url)
    console.log( "First character origin", lastRq.name )
}

resolveRequests()

<h1>Conclusiones</h1>

This is a modern way to request data from an API. If you got lost, I highly recommend to check the docs of the API and study its responses on postman or a similar tool.

hace 3 años