Can't get the list of items from a axios request

Question

I'm trying to get the list of the items (pokemon) from the api using axios, and map to return just the name of the pokemon, but I just get the Promise, I have no idea what I'm doing wrong.

import axios from "axios";

class Pokemon {
    async all() {
        try{
            const response = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=9")
            return await response.data.results.map(item => item.name)
        }catch (error){
            console.log(error);
        }
    }
}

const pokemon = new Pokemon
const listPokemon = pokemon.all();
console.log(listPokemon); // Promise { <pending> }

This has been asked several times on this site. Please get comfortable using the search bar. [This is the most upvoted answer](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call), but there are some other good ones on different questions. `listPokemon` here is a promise, so you could do `listPokemon.then(console.log)`. You can also remove the await in `return await response.data.....` — Zac Anger, Mar 12 '23 at 01:40
Trusts me, I've watched a lot of videos and search in a lot of places, all the time the guys just show how to console.log the response, and this doesn't answer my problem. The problem is, how can i set the result of the listPokemon.then(response => data) inside a variable that I can manipulate after? I've seen just things like that listPokemon.then(response => doSomething()); I don't want to call another function. Thanks, the link that you shared helped me a lot! — Stark, Mar 12 '23 at 13:49
Yeah, same way. You have to resolve the promise, get the value out with another .then or an await in an async function, or if you want to be hacky about it you could do some stuff with a callback setting a variable to the value, before you can use it. — Zac Anger, Mar 12 '23 at 16:35

score 1 · Answer 1 · answered Mar 12 '23 at 07:02

1

The all() method of Pokemon class is async therefore it has to await for the response to be resolved:

class Pokemon {
  async all() {
    try{
      const response = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=9")
        return await response.data.results.map(item => item.name)
    }catch (error){
       console.log(error);
    }
  }
}

const pokemon = new Pokemon
const listPokemon = await pokemon.all(); // <= put await before async method
console.log(listPokemon);

answered Mar 12 '23 at 07:02

jkalandarov

564
5
15

Thanks! I've tried this way, but it isn't working before, because I got an error when I tried to use the await before the pokemon.all() method, but the problem it was with the my typescript config, that should be set "module" to "es2022" to use await this way. – Stark Mar 12 '23 at 13:41

score 0 · Answer 2 · answered Mar 12 '23 at 02:03

await axios.get() means return value is a Promise

It returns without a finished get() call return value.

It will return a real value by Promise.resolve() after get() call is finished.

This is detailed information in here

This is demo code.

import axios from "axios";

class Pokemon {
    async all() {
        try{
            const response = await axios.get(
                "https://pokeapi.co/api/v2/pokemon?limit=9",
                {
                    headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json'
                    }
                })
            return Promise.resolve(response.data.results.map(item => item.name))
        }
        catch (error){
            return Promise.reject(error)
        }
    }
}

const pokemon = new Pokemon
pokemon.all()
    .then((listPokemon ) => {
        console.log(JSON.stringify(listPokemon, null, 4))
    })
    .catch(error => console.log(error));

Result

You need this line in package.json for import at the first line.

  "type": "module",

Can't get the list of items from a axios request

2 Answers2