Как пользоваться данными полученными из promise?

Question

[reinmaker90]

ДД, не ругайтесь пож-та, а просто подскажите или дайте ссылку на статью если есть в закладках где разжевывают эту тему, вот есть такой пример

let dataUsers;
  let url = "https://jsonplaceholder.typicode.com/users";
  fetch(url)
    .then((response) => response.json())
    .then((data) => (dataUsers = [...data]));

Как в коде потом можно пользоваться в дальнейшем данными сохраненными в переменной dataUsers?, т.е если вызвать ее сразу то очевидно что вернет undefined, если сделать через setTimeout, то могу получить значения, но это точно не верно, как при получении данных из асинхронного запроса потом их использовать в синхронном?
И если кто-то знает почему во vue.js такая же конструкция работает, т.е я могу сделать запрос из метода и записать результат в data и потом им пользоваться

Answer 1

[Артур]

Если хочется писать в стиле синхронного кода, воспользуйтесь async\await

const dataUsers = await fetch(url)...

Если хочется писать через промисы, то все должно решаться в коллбеках, т.е обработка результата вызова api, должна происходить в теле then

Comments

[reinmaker90]

Артур до конца не понял что вы имели в виду, использовать await в контексте асинхронной функции?

(async () => {
    let resp = await fetch(url);
    let result = await resp.json();
    result.forEach((res) => {
      // добавить еще переменную из глобального объекта и что-то с ними сделать
    });
    return result;
  })();

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

[Владимир]

reinmaker90, Чтобы преобразовать асинхронный код в синхронный при помощи async await нужно сначала разобраться как работать с асинхронным кодом, чего автор вопроса очевидно не умеет.
await работает только внутри функции объявленной через await, а результатом такой функции является Promise так что автор придет туда, откуда начал.

Answer 2

[Владимир]

1) Не присваивайте данные полученные в Promise глобальной переменной, иначе получите плохо поддерживаемый говнокод.
2) Вынесите код, который использует dataUsers в отдельную функцию и уже ее вызывайте в then
Это был первый этап, второй этап - https://habr.com/ru/company/mailru/blog/269465/

Comments

[reinmaker90]

Владимир а почему во vue можно данные полученные асинхронно присвоить переменной в data и использовать ее?
с обычным js вроде все усвоил, полученные данные нужно хранить и возвращать из той функции где был запрос, потом к ней как к промису обращаться из другой.

[Владимир]

reinmaker90, Приведите пример кода из vue, я с ним не работал.

[Darhild]

reinmaker90,

а почему во vue можно данные полученные асинхронно присвоить переменной в data и использовать ее

Дык, потому что vue под капотом устроен так, что при получении любых новых данных, все остальные данные тоже обновляются, и происходит перерендер компонента.
https://ru.vuejs.org/v2/guide/reactivity.html

[reinmaker90]

Darhild, спс, что то подобное подозревал