What is the best practice for incorporating asynchronous code in this case?

Question

Context: I'm building a popup widget. The html and css files are stored in S3. I need to get those files asynchronously and then continue with the rest of the logic.

In the code below, I'm getting the html file from S3 and setting the contents of a popup div to be equal to the contents of this file.

The issue: I have a lot more logic to handle the rest of the form. I'm currently using loadFormFunctions as the starting point to executing the remaining logic. loadFormFunctions contains many other functions that need to be executed.

Question: Is this best practice for executing the remaining code? Or is there a way to check if getFromS3 has resolved and then continue executing another function?

async function getFromS3() {

    await fetch('someFileinS3.html', {
    }).then((response) => {
        return response.text()

    }).then((text) => {
        popup.innerHTML = "";
        popup.innerHTML = text;
        loadFormFunctions();
    })

}

I realize the way I've laid this out might be confusing. Please let me know if you need me to rephrase.

Answer 1

Your code seems unnecessarily verbose. You don't need to use continuations (then) for this when you have async await available to you. You also really don't need a whole separate continuation just to get the text from the response object.You're also redundantly setting popup.innerHTML to an empty string before just reassigning it again.

How about the following?

async function getFromS3() {
    response = await fetch('someFileinS3.html');
    popup.innerHTML = response.text();
    loadFormFunctions();
}

Answer 2

In your current code there is no need to use async/await, you can just return the top fetch

And then you can just

await getFromS3()

in your code and then continue on with the rest