Как записать ответ от сервера в переменную?

Question

[qfrontend]

Делаю запрос на сервер через fetch
Нужно записать ответ который пришёл в переменную CatalogNav.
Во втором блоке (then(data => { ...) присваиваю значение переменной CatalogNav, оно присваивается , в консоли выдаёт заполненный объект .
Но возвращается всё равно пустой объект.
Почему не меняется переменная CatalogNav?

const requestInitialState = () => {
  let CatalogNav = {};
  fetch("http://localhost:3000/data/CatalogNav.json")
    .then(response => {
      return response.json();
    })
    .then(data => {
      CatalogNav = { ...data };
      console.log(CatalogNav); // {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}} - выводит заполненный объект
    });
  console.log(CatalogNav); // {} - выводит пустой объект
  return CatalogNav;
};

Comments

[Роман Александрович]

const requestInitialState = async() => {
  let CatalogNav ={}
let data =  await fetch("http://localhost:3000/data/CatalogNav.json")
let CatalogNav = response.json()
  console.log(CatalogNav); // {} - выводит пустой объект
  return CatalogNav;
};

[lloydbanks]

Вы не знаете, что такое асинхронность? Все манипуляции с CatalogNav производите после того как получен ответ с сервера.

[nicandr]

lloydbanks прав, джаваскрипт асинхронный язык, он не ждет пока вернется ответ из ajax реквеста, он идет дальше и ввплняет код, пустая переменная потому что ответ с сервера еще не получен.

[alternativshik]

последний блок - это ж, наверное, промис. Возвращать надо где первый log()

Answer 1

[Сергей Сунцев]

const requestInitialState = () => fetch("http://localhost:3000/data/CatalogNav.json")
    .then(response => {
      return response.json();
    })
    .then(data => {
      return CatalogNav = { ...data };
      console.log(CatalogNav); // {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}} - выводит заполненный объект
    });

Вы что то типа этого имели ввиду?

Comments

[qfrontend]

Возможно.
А как в этом случае вытащить CatalogNav за пределы функции requestInitialState?
Как вернуть переменную-объект?

[Антон Швец]

qfrontend,
А как в этом случае вытащить CatalogNav за пределы функции requestInitialState?
что значит "за пределы"? слушаете промис, получаете значение.

Как вернуть переменную-объект?
никак. эта функция возвращает промис.

написать все это в плоском виде можно используя await, но я бы не советовал применять эвейты не понимая промисов.

Answer 2

[wAML]

Потому что асинхронный вызов.
console.log(CatalogNav); // {} - выводит пустой объект
Происходит раньше чем then