Почему при вызове функции при событии change результат запроса в fetch отрабатывает не правильно?

Question

Andy Koshman @Chupachar

front-end dev

JavaScript

Почему при вызове функции при событии change результат запроса в fetch отрабатывает не правильно?

Всем привет, на странице у меня есть select с option's выбора и смены валюты на странице, при клике на option перезагружается страница и я с сервера получаю актуальную валюту. Вот HTML:

<select id="select-currency">
  <option value="https://currency/EUR">EUR</option>
  <option value="https://currency/UAH">UAH</option>
  <option value="https://currency/USD">USD</option>
</select>

Так же есть js код который мне понадобился для того, чтобы при смене валюты делать запрос и обновлять валюту (было 100$ - стало 91 евро условно) в УЖЕ добавленной сущности в корзине. Проблема в том, что если я просто вызываю функцию updateCabinData(); как обычно:

async function updateCabinData(){...}
updateCabinData()

всё работает нормально, но смутило то что функция просто запускается при перезагрузке страницы и делаются лишние запросы. Я решил что очевидно нужно сделать хотя бы таким образом:

const selectCurrency = document.getElementById('select-currency');
selectCurrency.addEventListener('change', function() {
  updateCabinData();
});

чтобы функция вызывалась только после события change на данном select, но по какой то причине в данном варианте у меня "перемешиваются" валюты, они всё так же меняются то уже в неправильном порядке как будто value в html местами поменяли задним числом, принцип таков:
выбирается-показывается
UAH - EUR
EUR - UAH
USD - EUR
запрос как будто запаздывает на одну перезагрузку.
Мне кажется это что то связано с асинхронностью и я не понимаю в чем может быть проблема. Вот полный код:

spoiler

async function updateCabinData() { //инициализирую функцию
  const freightDataID = JSON.parse(localStorage.getItem("FreightID")) || []; //нужные данные 
  const savedPassTypeIDS = "PassTypeIDS[]"; //нужные данные
  const updatedCurrentTariff = [];

  let updatedOutputPrice = JSON.parse(localStorage.getItem("price")); //массив стоимости
  const currencyIndex = JSON.parse(
    localStorage.getItem("selectedIndexCurrency") || "[]"
  ); //массив индекса выбранного option валюты

  for (const [index, item] of currentTariff.entries()) { //перебираю каюту
    const usp = new URLSearchParams();
    usp.append("FreightID", item.FreightID);
    usp.append("CabinCategoryID", item.CabinCategoryID);
    usp.append("Accommodation", item.accommodation);
    usp.append("isSharable", item.isSharable);
    item.dataID.forEach((id) => usp.append(savedPassTypeIDS, id));
    const urlTariffCalculationPassenger = `${route(
      "TariffCalculationPassenger"
    )}?${usp.toString()}`; //формирую url для fetch

    const result = await fetchGetCabinPrice(
      urlTariffCalculationPassenger,
      options
    );

    if (result.result === 0) {
      alert("Тариф не найден");
      return;
    } else {
      const updatedItem = {
        ...item,
        sum: result.sum
      };
      updatedCurrentTariff.push(updatedItem); //перезаписываю стоимость которая пришла с сервера result.sum (тут при change новая стоимость не приходит)
    }
  }
//ниже белиберда, которая практически никак не относится к запросу (чистая механика)
  for (const updatedPrice of updatedOutputPrice) {
    const correspondingTariff = updatedCurrentTariff.find(
      (item) => item.currencyCabinID === updatedPrice.currencyCabinID
    );
    if (correspondingTariff) {
      updatedPrice.price = correspondingTariff.sum;
    }
  }

  localStorage.setItem("cabins", JSON.stringify(updatedCurrentTariff));
  localStorage.setItem("price", JSON.stringify(updatedOutputPrice));

  const findCurrencyCabinIDs = currentTariff.map(
    (item) => item.currencyCabinID
  );
  const currentOutputPrices = findCurrencyCabinIDs.map((currencyCabinID) => {
    const matchingPrice = updatedOutputPrice.find(
      (item) => item.currencyCabinID === currencyCabinID
    );
    return matchingPrice ? matchingPrice.price : undefined;
  });

  const signIDs = document.querySelectorAll("#sign");

  signIDs.forEach((signID, i) => {
    signID.textContent = `${formatDecimalNumber(
      parseFloat(currentOutputPrices[i])
    )} ${addCurrencySign(currencyIndex)}`;
  });

  function saveSumPriceToRender(updatedOutputPrice) {
    let sum = updatedOutputPrice.reduce((acc, curr) => acc + curr.price, 0);
    localStorage.setItem("sumPrice", sum);
    let sumPrice = localStorage.getItem("sumPrice") || 0;
    tariffVal.innerHTML = formatDecimalNumber(parseFloat(sumPrice));
  }

  saveSumPriceToRender(updatedOutputPrice);
}

// updateCabinData(); так нормально 

const selectCurrency = document.getElementById('select-currency'); 
selectCurrency.addEventListener('change', function() {
  updateCabinData(); //вот так получаю "неправильный" result.sum
});