无法从 axios 请求中获取项目列表。

huangapple go评论74阅读模式
英文:

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

问题

以下是翻译好的代码部分:

我正在尝试使用axios从API获取项目宝可梦的列表并映射以返回宝可梦的名称但我只得到了Promise我不知道我做错了什么

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> }
英文:

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 &quot;axios&quot;;

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

const pokemon = new Pokemon
const listPokemon = pokemon.all();
console.log(listPokemon); // Promise { &lt;pending&gt; }

答案1

得分: 1

Pokemon 类的 all() 方法是 async 的,因此它必须等待响应被解决:

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(); // <= 在异步方法之前加上 await
console.log(listPokemon);

无法从 axios 请求中获取项目列表。

英文:

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(&quot;https://pokeapi.co/api/v2/pokemon?limit=9&quot;)
        return await response.data.results.map(item =&gt; item.name)
    }catch (error){
       console.log(error);
    }
  }
}

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

无法从 axios 请求中获取项目列表。

答案2

得分: 0

await axios.get() 的意思是返回值是一个 Promise

它会在 get() 调用完成之前返回,然后会通过 Promise.resolve() 返回一个真实值。

这是关于这个的详细信息: 这里

这是演示代码。

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));

结果

无法从 axios 请求中获取项目列表。

你需要在 package.json 中添加这一行以便在第一行使用 import

  "type": "module",
英文:

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 &quot;axios&quot;;

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

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

Result

无法从 axios 请求中获取项目列表。

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

  &quot;type&quot;: &quot;module&quot;,

huangapple
  • 本文由 发表于 2023年3月12日 09:37:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75710622.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定