Как вывести значение из функции при асинхронном запросе?

Question

[myskypesla]

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

Подскажите как решить проблему?

https://codesandbox.io/s/18rwyww674

Comments

[Roman Sokolov]

Ответ сервера нужно искать в объекте response

Answer 1

[Антон Спирин]

Проблема в полном непонимании принципа работы асинхронного кода.
Исправить можно так:

const getUsers = () => fetch("https://jsonplaceholder.typicode.com/users");

getUsers().then(res => res.json()).then(res => {
  document.getElementById("app").innerHTML = JSON.stringify(res);
})

Answer 2

[Никита Егоров]

Ну или через async / await

async function data() {
  return fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(response => JSON.stringify(response))
};

async function setHTML() {
  document.getElementById("app").innerHTML = await data();
}

setHTML();

Comments

[myskypesla]

Спасибо большое

Answer 3

[Павел Новиков]

let arr = [];
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(response => response)
    .catch(error => console.error(error));
  return arr;

вы объявляете пустой массив а потом его возвращаете. Может решить проблему тем, что пушить в массив данные?

UPD:
Например, можно сделать так

let arr = [];
 fetch("https://jsonplaceholder.typicode.com/users")
 .then(function(response) {
     return response.json();
 }).then(function(user) {
   arr.push(user);
   document.getElementById("app").innerHTML = JSON.stringify(arr);
 })

 console.log(arr)

Comments

[Антон Спирин]

Не решить. новое значение innerHTML будет присвоено раньше, чем придет ответ от сервера.

[Павел Новиков]

Антон Спирин, ну это да, потому что код выполняется ассинхронно и значение в хтмл будет записано раньше чем код выполнится - это факт. Но тут сам код бессмысленный, так как он в любом случае вернет пустой массив