title: Using fetch with async/await returns [object Object]
body: <p>I'm trying to fetch this public API using fetch with async and await, but the fetch method is returning an [object Object]:</p>
  
  <p>The class I'm using to fetch the API:</p>
  
  <pre><code>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}`;
    }
  }
  </code></pre>
  
  <p>The structure the API is returning (if the animal is a pig):</p>
  
  <pre><code>{"color": "pink", "sound": "roinc"}
  </code></pre>
  
  <p>I'm importing my class in another file and calling it as:</p>
  
  <pre><code>const animals = new FetchAnimalApi();
  console.log(animals.getAnimalInfo('pig'));
  </code></pre>
  
  <p>So, what am I doing wrong?</p>
  
  <p>EDIT:</p>
  
  <p>Now my console.log() shows exactly what I want to print, but when I return the response, I'm still getting [object Object]:</p>
  
  <pre><code>function getInfo() {
    const animals = new FetchAnimalApi();
  
    return animals.getAnimalInfo('pig').then(result =&gt; result);
  }
  </code></pre>
  
  <p>While debugging, I realized that [object Object] is being printed in my screen right after <code>const request = await fetch(</code><a href="http://my_api_url.com/" rel="nofollow noreferrer">http://my_api_url.com/</a>${animal}<code>)</code> line is executed.</p>