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

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

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

问题

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

  1. 我正在尝试使用axios从API获取项目（宝可梦）的列表，并映射以返回宝可梦的名称，但我只得到了Promise，我不知道我做错了什么。
  3. import axios from "axios";
  5. class Pokemon {
  6.     async all() {
  7.         try{
  8.             const response = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=9")
  9.             return await response.data.results.map(item => item.name)
  10.         }catch (error){
  11.             console.log(error);
  12.         }
  13.     }
  14. }
  16. const pokemon = new Pokemon
  17. const listPokemon = pokemon.all();
  18. 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.

  1. import axios from &quot;axios&quot;;
  3. class Pokemon {
  4.     async all() {
  5.         try{
  6.             const response = await axios.get(&quot;https://pokeapi.co/api/v2/pokemon?limit=9&quot;)
  7.             return await response.data.results.map(item =&gt; item.name)
  8.         }catch (error){
  9.             console.log(error);
  10.         }
  11.     }
  12. }
  14. const pokemon = new Pokemon
  15. const listPokemon = pokemon.all();
  16. console.log(listPokemon); // Promise { &lt;pending&gt; }

答案1

得分: 1

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

  1. class Pokemon {
  2.   async all() {
  3.     try {
  4.       const response = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=9");
  5.       return await response.data.results.map(item => item.name);
  6.     } catch (error) {
  7.       console.log(error);
  8.     }
  9.   }
  10. }
  12. const pokemon = new Pokemon;
  13. const listPokemon = await pokemon.all(); // <= 在异步方法之前加上 await
  14. console.log(listPokemon);

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

英文:

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

  1. class Pokemon {
  2.   async all() {
  3.     try{
  4.       const response = await axios.get(&quot;https://pokeapi.co/api/v2/pokemon?limit=9&quot;)
  5.         return await response.data.results.map(item =&gt; item.name)
  6.     }catch (error){
  7.        console.log(error);
  8.     }
  9.   }
  10. }
  12. const pokemon = new Pokemon
  13. const listPokemon = await pokemon.all(); // &lt;= put await before async method
  14. console.log(listPokemon);

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

答案2

得分: 0

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

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

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

这是演示代码。

  1. import axios from "axios";
  3. class Pokemon {
  4.     async all() {
  5.         try{
  6.             const response = await axios.get(
  7.                 "https://pokeapi.co/api/v2/pokemon?limit=9",
  8.                 {
  9.                     headers: {
  10.                       'Accept': 'application/json',
  11.                       'Content-Type': 'application/json'
  12.                     }
  13.                 })
  14.             return Promise.resolve(response.data.results.map(item => item.name))
  15.         }
  16.         catch (error){
  17.             return Promise.reject(error)
  18.         }
  19.     }
  20. }
  22. const pokemon = new Pokemon
  23. pokemon.all()
  24.     .then((listPokemon ) => {
  25.         console.log(JSON.stringify(listPokemon, null, 4))
  26.     })
  27.     .catch(error => console.log(error));

结果

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

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

  1.   "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.

  1. import axios from &quot;axios&quot;;
  3. class Pokemon {
  4.     async all() {
  5.         try{
  6.             const response = await axios.get(
  7.                 &quot;https://pokeapi.co/api/v2/pokemon?limit=9&quot;,
  8.                 {
  9.                     headers: {
  10.                       &#39;Accept&#39;: &#39;application/json&#39;,
  11.                       &#39;Content-Type&#39;: &#39;application/json&#39;
  12.                     }
  13.                 })
  14.             return Promise.resolve(response.data.results.map(item =&gt; item.name))
  15.         }
  16.         catch (error){
  17.             return Promise.reject(error)
  18.         }
  19.     }
  20. }
  22. const pokemon = new Pokemon
  23. pokemon.all()
  24.     .then((listPokemon ) =&gt; {
  25.         console.log(JSON.stringify(listPokemon, null, 4))
  26.     })
  27.     .catch(error =&gt; console.log(error));

Result

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

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

  1.   &quot;type&quot;: &quot;module&quot;,

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

发表评论

匿名网友

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

确定