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

Question

[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 и тп. Подскажите как это реализовать?

Answer 1

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

Проблему можно решить с помощью 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);
}

Comments

[lavezzi1]

async/await внутри лупа не работает пока что

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

lavezzi1, не заметил, что у вас там map. Вы его использовали некорректно, так как колбек map каждую итерацию должен возвращать значение, а у вас не возвращает. Поправил ответ.

[lavezzi1]

Антон Спирин, Просто когда пример писал забыл вернуть значение.