Как вывод в консоль дожидается выполнения async функции?

Question

[baranovstas]

Всем привет. Есть следующий код:

async function func() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
}
console.log(func()); // успешный промис, результат которого - массив пользователей

Что выполняется внутри func?
1) fetch возвращает промис.
2) Промис делает get запрос.
3) Получает ответ - объект Response.
4) Потом резолвится этим объектом.
5) Тем временем, await, перед fetch, ждёт выполнения всех 4 пунктов, чтобы получить результат промиса и отдать этот результат в const response.
6) Затем мы переводим результат из json-строки в массив - это тоже происходит не сразу, а с определённой задержкой.
7) Поэтому мы добавляем еще один await, чтобы дождаться и этой операции.
8) И вот только после того, когда все вышестоящие пункты выполнились, вот тогда и происходит return из func.

Но! Вывод в консоль - это синхронный код, а значит не ждёт выполнения всех пунктов (асинхронных операций). По сути для вывода в консоль тело func должно быть таким:

async function func() {
  const response = undefined; // undefined, потому что синхронный код не ждёт, когда придет ответ от сервера, он тупо идет дальше...
  return undefined; // тут тоже возвращается undefined, потому что вывод не ждёт выполнения - await response.json()
}
console.log(func()); // успешный промис с результатом undefined

И вот сам вопрос - почему выводится промис, результат которого массив? Почему не выводится промис с результатом undefined? То есть получается вывод в консоль успевает дождаться всех операций у func, верно?

Ремарка: я знаю, что async возвращает промис и резолвит его со значением, которое идёт после return (если после return идет промис, то возвращается он). А если у функции нет конкретного возвращаемого значения или вообще, её тело пустое, то вернётся успешный промис с результатом undefined.

Comments

[WbICHA]

То есть две предыдущие темы, где тебе всё разжевали как для новорожденного, тебе недостаточно?
Ох, как же я был прав в своих выводах ещё в первой теме...

Answer 1

[Rsa97]

async func() всегда возвращает промис.
И в консоль выводится именно этот промис со статусом pending.
После завершения fetch и json статус промиса изменится на fulfilled и ему добавится значение.
Вот вывод консоли сразу после console.log:
Promise { <state>: "pending" }
Если через некоторое время раскрыть этот объект, то увидим, что его статус уже сменился (вы ведь помните, что в консоль выводится живой объект по ссылке):

Promise { <state>: "pending" }
​  <state>: "fulfilled"
​  <value>: Array(10) [ {…}, {…}, {…}, … ]
​  <prototype>: Promise.prototype { … }

Comments

[baranovstas]

Стоп, смотри, при данном коде выводится сразу в состоянии fulfilled:

async function func() {
  setTimeout(() => {
    return 1;
  }, 1000);
}
console.log(func());

А в своем вопросе я имел ввиду, что данный код:

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

По сути должен быть как этот:

function fn() {
  setTimeout(() => {
    return 1;
  }, 1000);
}
console.log(fn());

В консоли будет undefined. Так и во втором примере кода (в этом комменте) по сути тоже должен вернуться промис с fulfilled и с результатом undefined?

[edward_freedom]

baranovstas, а куда ты возвращаешь ретурн 1, если он в колбеке сеттаймаута

[Rsa97]

baranovstas, Не должен. В первом случае в функции нет явного return, значит она возвращает undefined сразу после вызова setTimeout.
Эквивалентом будет следующая функция:

async function fn() {
  return await new Promise(
    (resolve) => {
      setTimeout(() => { resolve(1); },  10000)
    }
  );
}
console.log(fn());

[WbICHA]

Rsa97, резолв забыл вызвать.

[Rsa97]

WbICHA, Угу. И async забыл объявить.

[baranovstas]

Rsa97, Смотри,

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

При таком коде async-функция возвращает промис, этот промис получает результат в виде массива, потому что после return у нас идёт await response.json(). Метод json тоже возвращает промис, результатом которого как раз и является этот самый массив. Оператор await дожидается, когда этот промис из json зарезолвится, потом получает его результат и отдаёт этот результат ключевому слову return. Async-функция видит, что после return идёт массив и поэтому резолвит возвращенный ею промис этим массивом.

Но если у нас будет такой код:

async function func() {
  return new Promise(resolve => resolve(1));
}
console.log(func());

Оператора await здесь нет, поэтому в данном примере после return не число 1, а экземпляр промиса зарезолвленный. То есть вот теперь по сути async-функция должна зарезолвиться этим экземпляром, но в консоли почему-то всё равно [[PromiseResult]] - число 1. Почему? Типо у промисов под капотом видимо так устроено, что если в resolve(value), value - это промис, то созданный экземпляр промиса получает результат value, да?

[Rsa97]

baranovstas, Поскольку в return явно возвращается промис, то async не оборачивает его в свой промис, а возвращает как есть.

Answer 2

[zkrvndm]

Асинхроная функция всегда возвращает промис, вы своим console.log выводите отнюдь не результат, а тупо промис от функции. Далее, в консоли вполне можно запускать асинхронный код, попробуйте прямо сейчас вбить в консоли:

response = await (await fetch('https://jsonplaceholder.typicode.com/users')).json();
console.log(response);

Или же применительно к вашему коду делайте так:

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