Почему чтобы применить методы к fetch его нужно перед этим вынести в переменную?

Question

[Петр Сергеев]

Пример с learn.javascript.

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // читаем ответ в формате JSON

alert(commits[0].author.login);

Почему нельзя метод .json(); нельзя применить там же где мы получаем запрос?
Зачем выводить это в другую переменную? Разве это не должно быть одним и тем же?

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let commits = await fetch(url).json();

alert(commits[0].author.login);

Answer 1

[Александр]

await (await fetch(url)).json();
А записывать в другую переменную чтобы можно получить данные самого ответа - ok, status, statusText, headers и т. д.

Comments

[Михаил]

await fetch().then(r => r.json())

[Петр Сергеев]

ааа,- получается ошибка в том, что в момент когда начинает отрабатывать await fetch(url);,
если не ставить await перед методом .json() то он пытается отработать, но запрос await fetch(url); еще не пришел и по этому .json() просто не с чем работать и из-за этого ошибка. Верно я понимаю?

[Sun_Day]

Петр Сергеев, приблизительно так. У тебя промис в этот момент должен быть в состоянии pending, а ты у него пытаешься метод json вызвать, которого у самого промиса нет. json тебе нужно вызвать тогда, когда промис завершился с состоянием fulfilled и вернул ответ. Метод json() тебе нужно вызывать у response, а не у незавершенного промиса.

Answer 2

[profesor08]

Потому что fetch возвращает промис, а у промиса нет метода json().
Запись let commits = await fetch(url).json(); равна let commits = await (fetch(url).json());. Поэтому сначала надо получить результат промиса, а потом уже работать с результатом, а записывать в переменную, или писать все в одну строчку - не имеет значения.

Answer 3

[Sun_Day]

Потому что тебе нужно ассинхронно получить ответ, а уже к ответу(результату промиса) применить json(). Зафетчить-то ты зафетчил, а получить результат от промиса тебе тоже нужно.

Например вот так

let response = await fetch(url).then(res => res.json());

Или как выше.