英文:
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 "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> }
答案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);
英文:
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);
答案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));
结果
你需要在 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 "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",
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论