Как сделать рекурсивный последовательный 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]

const fetchOne = url => axios
  .get(url)
  .then(r => r.data)
  .catch(err => err);

Рекурсия есть:

async function fetchNested(data) {
  const result = [];

  if (Array.isArray(data)) {
    for (const n of data) {
      result.push(await fetchOne(n.url), ...await fetchNested(n.children));
    }
  }

  return result;
}

Рекурсии нет:

const fetchNested = async function(data) {
  const result = [];
  const stack = [];

  for (let [ i, arr ] = this(data); ++i < arr.length || stack.length;) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else {
      result.push(await fetchOne(arr[i].url));
      stack.push([ i, arr ]);
      [ i, arr ] = this(arr[i].children);
    }
  }

  return result;
}.bind(x => [ -1, x instanceof Array ? x : [] ]);

Comments

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

Спасибо!

Answer 2

[Андрей]

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