Почему результатом fetch становится Object, а не результат return?

Question

[Ingernirated]

Почему при попытке вывести результат data, выводится [object Promise], а не текст из json?
И как здесь получить res.name?

var data = fetch("ajax.json").then(function(res){
	return res.json();
}).then(function(res) {
	return res.name;
}).catch();
document.write(data);

Answer 1

[Александр Манаков]

Потому что так работают Promise.

Answer 2

[Антон]

Потому что это асинхронность. То, что в .then() - выполняется после совершения http запроса. А document.write - до.
Рекомендую почитать учебники.

Ну а еще можно сделать так

(async function() {
  let data = await fetch("ajax.json").then(res => res.json());
  document.write(data);
}());

только работает далеко не везде, babel в помощь

Comments

[Ingernirated]

подскажи ещё, пожалуйста, почему не хочет выводить результатом функцию, чтобы вывести все значения?
а без вызова (), нет ошибки, но undefined.

function load() {
fetch("ajax.json").then(function(res){
	return res.json();
}).then(function(res) {
	document.write(res.all());
}).catch();
}
load();

ajax.json

{
"name" : "Boris",
"age" : "20",
"city" : "Moscow",
"all" : function() {return this.name + " " + this.age + " " + this.city}
}

[Dark Hole]

Ingernirated: а чего вы хотите?

[Ingernirated]

Dark Hole: магии, чтобы как в старые времена

obj = {
"name" : "Boris",
"age" : "20",
"city" : "Moscow",
"all" : function() {return this.name + " " + this.age + " " + this.city}
}
console.log(obj.all());

[Антон]

JSON - это не javascript. Там нет функций, this, и прочего. В данном случае будет так

class User {
  constructor({ name, age, city }) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
  get all() {
    return `${this.name} ${this.age} ${this.city}`;
  }
}

fetch("ajax.json").then(function(res){
  return res.json();
}).then(function(res) {
  const user = new User(res);
  document.write(user.all);
}).catch(e => { console.error(e); });

[Dark Hole]

Ingernirated: функции не могут быть сериализованы в JSON. No magic

[Ingernirated]

Dark Hole: зачем fetch пытаются запихнуть в переменные, если после при их вызове мы не получим результат или я не так её вывел?

var load = fetch("ajax.json").then(res => {
	return res.json();
}).then(res => {
	return res.name;
}).catch();

window.addEventListener("click", () => {console.log(load);});

просто, как итог

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "Boris"}

[Антон]

Ingernirated: надо либо присвоить переменной значение в promise

...
.then(resp => {
  load = resp;
})
...

или воспользоваться await

[Ingernirated]

Антон: почему undefined, если мы выполняем это действие после загрузки страницы?

var load = fetch("ajax.json").then(res => {
	return res.json();
}).then(res => {
	load = res.name;
}).catch();

window.addEventListener("load", () => {console.log(load);});

[Антон]

Ingernirated: ПОТОМУ ЧТО событие 'load' вызывается ДО загрузки 'ajax.json'

[Ingernirated]

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