Asynchronous return of some Apis

Question

Why the return of some Apis are exactly the result we want (for example, a JSON) and some others return an object full of functions and objects?

Example API that directly returns the result I want:

function user(id) {
  const users = {
    1: {id: 1, name: 'Lucas'},
    2: {id: 2, name: 'João'}
  };
  return new Promise(resolve => {
    setTimeout(() => resolve(users[id]), 1000);
  });
}

async function exec() {
  console.log(await user(1))
}

exec()

Already others return me an object that contains several things like, for example, body, bodyUsed, headers, ok, redirected, status, statusText, type, url and others.

For example, the Github API:

async function getUserGithub() {
  console.log(await fetch(`https://api.github.com/users/decarvalholucas`))
}
getUserGithub()

Why is it so and what difference do they make to it?

Answer 1

TL;DR: The methods in question do not come from the API, but from the object Response which is returned as a promise by fetch. To get the data from the body of the answer, you must use methods such as the json or text, available in the response object prototype (Response).

---

You are using the API fetch, that returns a Promise that solves in an object Response, which has the methods described in your question.

Therefore, it is not the Github API (or any other) that returns the methods described in the question, because that would not be a valid JSON, since this notation is not able to transfer data as functions or methods.

So the code to follow does not return your API’s JSON, but an object Response:

async function resolveFetch(...params) {
  // O `await` resolve a `Promise` retornada pelo `fetch` no objeto `Response`.
  const responseObject = await fetch(...params);

  // Aqui, `responseObject` é um objeto `Response` (retornado pelo `fetch`)
  // como uma promessa que já se resolveu.
  // Esse objeto possui diversos métodos, como o `json`, `text`, e 
  // propriedades como o `headers`, que te permitem converter o retorno da
  // API a um formato desejado (como o `json`) ou obter informações sobre
  // a resposta da requisição.
  return responseObject;
}

(async () => {
  const result = await resolveFetch('https://api.github.com/users/lffg');
  
  console.log(result instanceof window.Response); // true
})();

Thus, to obtain the value of the body of the answer, you must make use of some of the following methods, available in the prototype of the object Response, who were also listed here:

• arrayBuffer(), that returns a promise that resolves as a ArrayBuffer.
• blob(), that returns a promise that resolves as a blob.
• formData(), that returns a promise that resolves as a FormData.
• json(), that returns a promise that resolves with the result of parse of the body text as JSON.
• text(), that returns a promise that resolves with a text (USVString).

In your case, as you are dealing with Apis that return a JSON, it is more interesting to work with the json to convert the body of the response into text with JSON "parsed".

So we’re like this:

async function fetchJSON(...params) {
  // Aqui, `resolvedResponse` será um objeto `Response`, que veio da
  // resolução da promessa que o `fetch` retorna.
  const resolvedResponse = await fetch(...params);

  // Abaixo estamos usando o método `json`, presente no objeto `Response`
  // para obter o texto do corpo da resposta e já convertê-lo em JSON:
  const json = await resolvedResponse.json();

  // Podemos retornar o JSON.
  // Agora SIM! É o JSON retornado pela API! ;)
  return json;
}

(async () => {
  const json = await fetchJSON('https://api.github.com/users/lffg');

  console.log(json instanceof Response); // false

  // Notamos abaixo que agora sim se trata de um JSON.
  console.log(json.login); // "lffg"
})();

We can even turn this workflow in a simple diagram:

Answer 2

Failed to treat the receipt:

async function getUserGithub() {
  await fetch(`https://api.github.com/users/decarvalholucas`).then(function(response) {
      response.json().then(function(data){
          console.log(data);
        });
    });
}
getUserGithub()