What do the fetch() function and the json() method return in total?

Question

AJAX

Hello.

1) There is the following code, an instance of the Promise is displayed in the console:

function fn() {
  const result = fetch('https://jsonplaceholder.typicode.com/users');
  console.log(result);
}
fn();

2) The second version of the code (added async / await), an instance of the Response object is already displayed in the console:

async function fn() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users');
  console.log(result);
}
fn();

3) Third option:

async function fn() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users');
  return result;
}
console.log(fn());

Here I no longer output the result to the console, but return it from the function, so with this code, the Promise instance is again displayed, for which is the Response instance. And this is with the slightest code changes. Hence the question, so what does fetch ultimately return? Instance of Response or Promise?
4) Also, the json method is applied to the result of the fetch operation, in the Promis console:

async function fn() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users');
  const response = result.json();
  console.log(response);
}
fn();

5) And if I do this (added await before result.json()), then the expected array is already in the console:

async function fn() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users');
  const response = await result.json();
  console.log(response);
}
fn();

6) And the last example. If you don’t output it to the console again, but return the variable from the function, then Promise again:

async function fn() {
  const result = await fetch('https://jsonplaceholder.typicode.com/users');
  const response = await result.json();
  return response;
}
console.log(fn());

After reading the articles and watching the tutorials, I still have a question: what do the fetch function and the json method return in the end? If fetch returns a Promise, then how do we apply the json method to it? Promise does not have this method. Anyway, thanks for taking the time to read the question. I would be very grateful if there is an opportunity to explain in my own words, I myself am terribly confused ...

Answer 1

and where do you apply json directly to fetch?
Both fetch and json return a promise.
json you apply to the data that this promise returns when it resolves.

fetch().then(response => response.json()) != fetch().json()

That is, fetch makes a request, returns a promise.
When this request returns data, the promise returned by fetch is resolved by calling its internal resolve() function, which passes a special object as an argument, which already has methods .json, .text, etc.
Most likely you should dive deeper into promises, re-read what kind of object it is when fetch resolves, well, what is essentially async \ await and what does promises have to do with it.
As for async functions, they also return a promise. Always. Regardless of the code inside.