Что по итогу возвращают функция fetch() и метод json()?

Question

[anvaslist]

Всем привет.

1) Есть следующий код, в консоль выводится экземпляр Промиса:

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

2) Второй вариант кода (добавил async/await), в консоль уже выводится экземпляр объекта Response:

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

3) Третий вариант:

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

Здесь я уже не вывожу в консоль result, а возвращаю из ф-ии, вот при таком коде снова выводится экземпляр Промиса, у которого [[PromiseResult]] - экземпляр Response. И это при малейших изменениях кода. Отсюда вопрос, так что в конечном итоге возвращает fetch? Экземпляр Response или Promise?
4) Также к результату работы fetch применяется метод json, в консоли Промис:

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

5) А если сделаю вот так (добавил await перед result.json()), то в консоли уже ожидаемый массив:

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

6) И последний пример. Если опять не вывести в консоль, а вернуть переменную из ф-ии, то снова Промис:

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

После прочтения статей и просмотра туториалов, у меня всё равно остался вопрос: что в итоге возвращают функция fetch и метод json? Если fetch возвращает Промис, то как мы тогда к нему применяем метод json? У Промиса же нет этого метода. В общем, спасибо за уделённое время на прочтение вопроса. Буду премного благодарен, если есть возможность объяснить своими словами, я сам ужасно запутался...

Comments

[WbICHA]

Если fetch возвращает Промис, то как мы тогда к нему применяем метод json? У Промиса же нет этого метода.

А для чего ты await ставишь?

[anvaslist]

WbICHA, чтобы дождаться вопроса от сервера и зарезолвить промис этим ответом. Если по итогу будет всё равно промис, мы не можем применять к нему метод json, у промиса же нет такого метода?

[WbICHA]

baranovstas,

чтобы зарезолвить промис

Отлично, уже прогресс. Так что надо делать, когда ты получаешь промис?

[anvaslist]

WbICHA, чейнить, вызывать метод then. Не совсем понимаю, к чему эта цепочка вопросов? Пока я ни к чему не пришел.

[Дмитрий Беляев]

baranovstas,

(async () => {
  console.log(0)
  const r = await {
    then(onResolve, onRejected) {
        console.log(2);
        setTimeout(onResolve, 1500, 3);
    },
  };
  console.log(r);
})();
console.log(1);

await приостанавливает выполнение асинхронной функции, и вызывает метод then у того что ему отдали
а сама асинхронная функция всегда возвращает промис, что бы можно было дождаться ее полного выполнения из вызывающего кода, потому что она вернет управление вызывающему коду на первом же await

[anvaslist]

Дмитрий Беляев, так если await вызывает метод then у того, что ему отдали, то then тоже возвращает промис, поэтому в переменную result тоже должен присвоиться промис по сути, а не Response, верно?

[Дмитрий Беляев]

baranovstas, await никак не использует возвращаемое методом then значение, он полагается только на значения переданные в колбэки, которые он создает.
Если Вы внимательно посмотрите на мой пример, у меня метод then вообще ничего не возвращает, однако пример работает.

[anvaslist]

Дмитрий Беляев,

await никак не использует возвращаемое методом then значение, он полагается только на значения переданные в колбэки, которые он создает

Создает кто? await или then? Если await, то не понимаю, вы ведь сказали, что он вызывает метод then у того, что ему отдали, а не создает колбэк.

Если Вы внимательно посмотрите на мой пример, у меня метод then вообще ничего не возвращает, однако пример работает.

Вот здесь вообще не понял, у вас после await просто создается объект с таким же названным методом then и этот метод then вообще никак не вызывается у этого объекта, поэтому не пойму, как этот пример работает.
Дмитрий, смотрите, еще раз... ключевое слово await вызывает then у того, что ему передали. Этому ключевому слову await передаётся промис из fetch:

(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
})();

То есть, получается await делает:

(async () => {
  const response = fetch('https://jsonplaceholder.typicode.com/users').then(response => ???);
  // расписал, типо await под капотом
})();

И вот что дальше? Этот then, который мы вызвали после fetch, точно также возвращает новый экземпляр промиса (чтобы мы могли дальше чейнить then), соотвественно в переменную response по сути должен присвоиться экземпляр промиса, а не объект Response?

[Дмитрий Беляев]

baranovstas, а Вы пример запустите, и посмотрите что в консоли...

[anvaslist]

Дмитрий Беляев, я запустил, 0, 1, 2, 3 последовательно. Отталкиваясь от этого я всё равно не понимаю, как await вызывает then для возвращенного промиса из функции fetch и кладёт в переменную const response результат этого промиса, который возвращает then. То есть в переменную response по сути должен упасть промис, а не объект Response, потому что метод then возвращает промис?

[Дмитрий Беляев]

baranovstas, ок, псевдокод:

operator await(jsValue) {
  // ждем ближайший микротаск
  yield JS_RUNTIME.nextMicroTaskInEventLoop;

  // если у jsValue нет метода then
  if (typeof jsValue?.then !== 'function') {
    // то просто возвращаем его
    return jsValue;
  }

  // внутреннее состояние
  let isRejected = false;
  let result;

  // штука которая позволяет запланировать выполнение в микротаске
  const microtaskScheduler = JS_RUNTIME.createMicrotaskScheduler();

  // колбэки для then
  const resolve = (value) => {
    result = value;
    microtaskScheduler.schedule();
  };
  const reject = (value) => {
    result = value;
    isRejected = true;
    microtaskScheduler.schedule();
  };

  // вызываем метод then
  jsValue.then(resolve, reject);

  // ждем ближайший микротаск после вызова microtaskScheduler.schedule()
  yield microtaskScheduler;

  // возвращаем результат
  if (isRejected) {
    throw result;
  } else {
    return result;
  }
}

Answer 1

[Вадим]

а где Вы применяете json непосредственно к fetch?
И fetch и json возвращают промис.
json Вы применяете к данным, которые этот промис возвращает когда резолвится.

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

То есть fetch делает запрос, возвращает промис.
Когда этот запрос возвращает данные, то промис, который вернул fetch, резолвится по средствам вызова своей внутренней функции resolve(), в аргумент которой передаёт специальный объект, у которого уже есть методы .json, .text и тд.

Скорее всего Вам стоит погрузиться более глубоко в промисы, перечитать что это за объект такой, когда fetch резолвится, ну и что такое по существу async\await и причём тут промисы.

Что касается async функций, то они тоже возвращают промис. Всегда. Независимо от кода внутри.

Comments

[anvaslist]

json Вы применяете к данным, которые этот промис возвращает когда резолвится.

Стоп, промис же ничего не возвращает? Он только резолвит себя и всё. Как этот объект (экземпляр объекта Promise) что-либо возвращает? Он же приписывает себе в [[PromiseResult]] то, что было передано в resolve(value) и всё?

[Вадим]

baranovstas, ну если прям цепляться к словам, то да, промис не возвращает. Он вызывает callback функцию resolve, в которую передаются какие-то данные и доступ до этих данных можно получить в следующем коллбэке в цепочке .then

[Вадим]

baranovstas, и в случае с fetch Вы .json вызываете именно на этих данных, которые были переданы в resolve. На специальном объекте, который сгенерировал fetch и передал в resolve, когда запрос завершился.

[Сергей]

по средствам вызова своей внутренней функцию

посредством вызова своей внутренней функции

[anvaslist]

Когда этот запрос возвращает данные, то промис, который вернул fetch, резолвится по средствам вызова своей внутренней функцию resolve(), в аргумент которой передаёт специальный объект, у которого уже есть методы .json, .text и тд.

Вот, промис рарезолвился с этим объектом Response, который пришел в качестве ответа от сервера. Но вот всё же:

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

Вы сами сказали, что fetch возвращает промис, соотвественно в переменную result у нас присваивается экземпляр Promise. Так как мы к этому промису применяем метод json, где result.json()? У промисов же нет этого метода. И потом, если json тоже возвращает промис, в переменную response должен прийти промис, но в консоль почему-то попадает уже массив. Почему?
По поводу промисов, я их уже изучал, вплоть до того, что изучал их на примере различных имплементаций. Но все равно никак не могу понять...

[Вадим]

baranovstas,
Набросал на коленке что-то очень упрощённое.

// Определим псевдо фетч.
function pseudoFetch() {
    // Определим объект, который будем возвращать.
    const hello = {
        i: 'Vadim',
        say() {
            return `Hello world by ${this.i}`
        }
    }
    
    // Вернём промис
    return new Promise((resolve) => {
        // вместо xmlhttprequest воспользуемся setTimeout для имитации запроса.
        // Через 1500мс зарезолвим промис созданным объектом hello.
        setTimeout(() => { resolve(hello) }, 1500)
    })
}

// ну а теперь сделаем всё то же самое, что в Ваших примерах, только с нашим псевдо фечём.
pseudoFetch().then(response => response.say()).then(console.log) 
// Через 1500мс выведет в консоль Hello world by Vadim

[Вадим]

baranovstas,

Вы сами сказали, что fetch возвращает промис, соотвественно в переменную result у нас присваивается экземпляр Promise.

А вот тут Вы заблуждаетесь. Вы пользуетесь в контексте async await, а это уже другая история.
await дожидается резолва промиса и возвращает именно данные, которыми промис зарезолвился.
То есть в result тут будет не промис, а данные, которыми промис от fetch зарезолвился. То есть специальный объект, у которого есть метод .json

[Вадим]

baranovstas, Вроде в учебнике по js всё расписано, как работает async/await
https://learn.javascript.ru/async-await и почему await Promise возвращает не промис, а результат резолва промиса.

[anvaslist]

Вадим,

await дожидается резолва промиса и возвращает именно данные, которыми промис зарезолвился

Так, вооот, вот это уже другой разговор. Собственно, как вообще можно вернуть результат промиса? Мы же не можем получить доступ к его свойству [[PromiseResult]], в котором хранится тот объект Response? Ну имею ввиду, чтобы получить этот результат промиса и просвоить его в перменную result нашу.

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

Получается в строке, где await result.json(), этот await возвращает в переменную response результат промиса тоже? Но все равно не пойму, каким именно образом мы можем вернуть результат промиса. Это как вообще? Нет же доступа к его результату (свойству Result)

[Вадим]

baranovstas, Ну вот чтобы взять и написать return Promise.result, да, не можем.
Это ключевая разница, меняющая парадигму написания кода. Переход от синхронного к асинхронному.
Просто так вернуть именно результат промиса - нельзя.

Для упрощения работы с асинхронным кодом в синхронном "формате" и были придуманы async\await.
Таким образом, можно получить результат промис с помощью await и использовать его в следующей же строчке кода.
Так как async функция возвращает промис, то это позволяет нам их так же использовать с помощью await и в следующей строчке кода использовать данные, которые возвращает async функция.

То есть, например:

async function baf() {
    async function bar() {
        return await Promise.resolve('bar')
    }

    async function baz() {
        return await Promise.resolve('baz')
    }

    const a = await bar()
    const b = await baz()
    
    return [a, b]
}
const bafPromise = baf() // в место вызова вернётся промис
bafPromise.then(console.log) // ['bar', 'baz']

[Вадим]

baranovstas,

Получается в строке, где await result.json(), этот await возвращает в переменную response результат промиса тоже?

Да

[Вадим]

baranovstas, Если в ходе наших обсуждений Вы смогли получить ответ на свой вопрос, то отметьте его решением, чтобы другие пользователи сервиса знали что на этот вопрос есть ответ и а) не тратили на него своё время, б) не создавали похожие вопросы.

Если нет, то готов ответить на оставшиеся вопросы.

[anvaslist]

Вадим, Вадим, я отходил более подробно вникнуть в async/await. В общем да, теперь я понял, что и fetch и json возвращают промисы, а ключевое слово await получает результат того промиса, который они возвращают (и кстати, спасибо за вашу мини-имплементацию fetch). Но вот одного я всё равно так и не понял: как именно await присваивает в переменную результат выполненного промиса? Вот смотрите, к примеру, await дожидается выполнения промиса, дождалось, то есть у нас есть зарезолвленный экземпляр объекта Promise. Но как именно у await получается вот так взять и достать результат этого зарезолвленного экземпляра и положить его в переменную? Ну я вот просто вообще не вижу здесь любого другого способа, как обратиться к свойству [[PromiseResult]] и взять значение этого свойства. Но оно же ведь недоступно?

[Вадим]

baranovstas, Ну я прям настолько глубоко не копал. Но не стоит упускать из головы того факта, что это недоступно нам, а движок под капотом браузера может делать что хочет.

[Вадим]

baranovstas, Насколько я помню, async\await это обёртка поверх промисов + генераторы. Но информации под рукой нет.