How to execute code after a call to a function that uses fetch is done? [duplicate]

I have a function that I call that uses fetch:

function fetchData() {
fetch(`${url}`)
    .then(response => response.json())
    .then(json => {
         // use the json to update some UI
        });

    })
    .catch(function (err) {

    })
    .finally(function () {
        
    });
}

Now whenever I fetch this data, I always want to update a certain part of the UI the same way, that’s why I have the json part inside the function:

    .then(response => response.json())
    .then(json => {
         // use the json to update some UI
        });

    })

But I also want to call this function to do other different UI updates depending on where it was called from, for example opening different modals:

function someFunction() {
    fetchData();
    openModal();
}

function someOtherFunction() {
    fetchData();
    openOtherModal();
}

How can I call the second function only after fetchData() is done? Is there a way to “chain” the then() outside?

For example something like:

fetchData().then(openModal());

Or, it’s not possible in the way it’s currently written?