Async Function Inside Async Function

Question

I am trying to get Data over my API-Endpoint and want to populate my page with the data. I know that I have to use async/await to be sure that the variable was filled. Therefore I wrote the following lines and want to know that it is possible to write an async function inside an async function. It is working but I am not sure if it is the correct way:

async function getRoom(id) {
    const response = await fetch('/api/zimmer/' + id);
    if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        throw new Error(message);
    }
    const rooms = await response.json();
    console.log(rooms);
    return rooms;
}

async function getSelectedItem() {
    var e = document.getElementById("Objekt");
    if (e.value > 0) {
        zimmer_select.disabled = false;
        var response = await getRoom(e.value);
        console.log(response);
        response.forEach(function(element) {
            
            console.log(element);
        });
    } else {
        zimmer_select.disabled = true;
    }
    console.log(e.value);
}

Answer 1

I think it is fine to use it this way actually. If you think about, sometimes you have to use async inside async. What if you have some async function which fetches data and you have to loop over that data and await for something. If you loop it with for each you won't be able to use await, so you should put async before it. So as long it's clean and have no other way, I think it is fine to use async inside async.