Как сделать рекурсивный последовательный async-await?

Question

[Евгений Журов]

Нужно строго последовательно выполнить серию асинхронных запросов и полученные данные запушить в массив. Исходные данные имеют древовидную структуру:

let data = [{
  url: '/some-url',
  children: [
    {
      url: 'some-url',
      children: null
    },
    {
      url: 'some-url',
      children: [
        url: 'some-url',
        children: null
      ]
    }
  ]
},
{
  url: 'some-url',
  children: null
}]

Требуется написать цикл, который рекурсивно обрабатывать массив, делая запросы на url-ы. Т.е. при первой итерации делает запрос, дожидается ответа, пушит ответ в массив, затем проверяет, если ли у объекта на данном уровне children, если есть, то делает все то же самое с children'ами. Иначе говоря, на выходе должен получиться одномерный массив с данными, полученными по урлам. Использую axios в vue-приложении, т.е. запросы делаются this.axios.get(url).
Как лучше всего решить подобную задачу?

Comments

[Kovalsky]

А в чем конкретно проблема? Вы полностью описали алгоритм, прям по тексту в вопросе можно писать код

Answer 1

[0xD34F]

Последовательно:

async function fetchRecursive(arr) {
  const result = [];

  if (Array.isArray(arr)) {
    for (const n of arr) {
      try {
        result.push({ status: true, result: await fetch(n.url).then(r => r.json()) });
      } catch(error) {
        result.push({ status: false, error });
      }

      result.push(...await fetchRecursive(n.children));
    }
  }

  return result;
}

Параллельно:

const flat = arr => (arr || []).flatMap(n => [ n.url, ...flat(n.children) ]);

const fetchRecursive = arr => Promise.allSettled(flat(arr).map(n => fetch(n).then(r => r.json())));

Comments

[Евгений Журов]

Спасибо!

Answer 2

[Андрей]

Решение на хабре