lavezzi1
@lavezzi1

Как правильно организовать данный асинхронный код?

Здравствуйте!

handleSomething(data) {
  const items = data.map((elem) => {
    const item = { source: elem };
    if (item.someCheck()) {
      item.type = 'type-1';
      const things = fetch('/api/things?type=1');
      this.$set(item, 'things', things);
    } else {
      item.type = 'type-2';
    }
  });
  this.$emit('get', items);
}


Сейчас проблема в том, что я получаю данных, но things у item прилетают чуть позже по очевидной причине.

Полагаю, что items должен быть массивом промисов и ресолвиться уже с готовыми things и тп. Подскажите как это реализовать?
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Проблему можно решить с помощью async/await.

Вариант 1:
async handleSomething(data) {
  const items = [];

  for(let i = 0; i < data.length; i++) {
    const item = { source: data[i] };

    if (item.someCheck()) {
      const things = await fetch('/api/things?type=1');

      item.type = 'type-1';
      this.$set(item, 'things', things);
    } else {
      item.type = 'type-2';
    }
    items.push(item);
  }

  this.$emit('get', items);
}


Вариант 2:
async handleSomething(data) {
  const items = await Promise.all(data.map(async elem => {
    const item = { source: elem };

    if (item.someCheck()) {
      const things = await fetch('/api/things?type=1');

      item.type = 'type-1';
      this.$set(item, 'things', things);
    } else {
      item.type = 'type-2';
    }

    return item;
  });

  this.$emit('get', items);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы