[borus]

Продолжаю делать учебный проект, который запрашивает данные по товарам с некого локального сервера(код сервер не буду прикладывать) с помощью функции getGoodsList(), декларированной в файле APImodel.js.
Эта функция вызывается при построении приложения в функции createApp(), декларированной в файле view.js. выглядит это усеченно так:

async function createApp(container, model) {
    const spinner = document.getElementsByClassName('spinner-border')[0];
    spinner.style.display = ''; // покажем спиннер
    model.getGoodsList()
    .then(goodsData => {
      if (typeof goodsData !== 'undefined') {
        if (goodsData !== null && goodsData.products.length > 0){
          let goodsUL = createGoodsList();
          container.append(goodsUL);
          for (let item in goodsData.products) {
              let product = createLi(goodsData.products[item]);
              goodsUL.append(product);
          }
        }
      }
    })
...

А вот код getGoodsList() из APImodel.js:

//получение списка товаров:
function getGoodsList(step = 0) {
  return fetch(`http://localhost:3000/api/products`)
    .then(res => {
      if (res.status === 404) {
        throw new Error ('404');
      }
      if (res.status === 500) {
        if (step < 2) {
          getGoodsList(++step);
        }
        else {
          throw new Error ('500');
        }
      }
      return res.json();
    });
}

В этой функции получения данных происходит её рекурсивный самовызов(не более двух раз) в случае, если ответ сервера вернул статус 500.
В результате отладки увидел, что если статус ответа сервера равен 500, то после повторного вызова функции getGoodsList(), не дожидаясь нового ответа от сервера, ход исполнения программы перескакивает в секцию then() функции createApp().
Есть пара вопросов:
1. Почему такое происходит?
2. Как заставить код дождаться ответа после повторного обращения к серверу, прежде чем переходить в секцию then() функции createApp()?