等待加载数据异步

Question

I have some problem with js. So I fetch some data from API and I need to start some function, which can show the page. So my code
route.js

export let rate = {};

const getNewRate = async () => {
const responce = await fetch('https://www.cbr-xml-daily.ru/daily_json.js');
const json = await responce.json();
rate = json.Valute;
await setRateExc(rate);
await setRate(rate);
};

getNewRate();

export const onClickExchange = () => {
root.innerHTML = null;
exchange();
};

export const onClickCurExchange = () => {
root.innerHTML = null;
getRate();
};

So, this is the code of router, I need that getNewRate finish before starting onClickExchange in other file. How I can make it?
This is my try.

setTimeout(() => {
    onClickExchange();
}, 500)

Answer 1

A sample to go on with

const rate = "";
async fetchUsersDataRequest = () => {
    const url = `the-api-url-here`;
    //...
    await fetch(url)
      .then((res) => res.json())
      .then((res) => {
        console.log(res.Value); // Valute or Value ?
        rate = res.Value;
      })
      .catch((error) => {
        console.log(error);
        //...
      });
    await setRateExc(rate);
    await setRate(rate)
  };

Answer 2

Okay, got it. I can use onClickExchange in getNetRate().then(() => onClickExchange())