将提取与异步/等待一起使用会返回[对象对象]

Question

I'm trying to fetch this public API using fetch with async and await, but the fetch method is returning an [object Object]:

The class I'm using to fetch the API:

class FetchAnimalApi {
  async getAnimalInfo(animal) {
    const request = await fetch(`http://my_api_url.com/${animal}`);
    const response = await request.json();

    return `${animal} goes like ${response.sound}`;
  }
}

The structure the API is returning (if the animal is a pig):

{"color": "pink", "sound": "roinc"}

I'm importing my class in another file and calling it as:

const animals = new FetchAnimalApi();
console.log(animals.getAnimalInfo('pig'));

So, what am I doing wrong?

EDIT:

Now my console.log() shows exactly what I want to print, but when I return the response, I'm still getting [object Object]:

function getInfo() {
  const animals = new FetchAnimalApi();

  return animals.getAnimalInfo('pig').then(result => result);
}

While debugging, I realized that [object Object] is being printed in my screen right after const request = await fetch( http://my_api_url.com/ ${animal} ) line is executed.

Answer 1

You can't call console.log(animals.getAnimalInfo('pig')); this way. animals.getAnimalInfo returns a promise. To get result, you should use then callback:

const animals = new FetchAnimalApi();
animals
  .getAnimalInfo('pig')
  .then(result => console.log(result));