我正在使用Spotify REST API和JQuery创建一个简单的应用程序，用户可以在其中找到艺术家，然后它将显示有关艺术家，相关艺术家和页面上最常听的歌曲的信息。我创建了3 AJAX 调用，你可以在下面看到，一切正常，但我认为它可以用一种更好的方式编写（承诺也许？）.
第一 AJAX 调用从服务器获取id并创建一些DOM元素。后两 AJAX 调用需要id来运行，并且还创建DOM元素。还有一个删除按钮，它应该删除从每个 AJAX 调用的数据构建的DOM元素。
是否可以使用最佳实践将其嵌套，或者这是唯一可能的方法？

artistForm.submit((e) => {
    e.preventDefault();
    let inputSearchQuery = artistInput.val();
    let searchQuery = encodeURI(inputSearchQuery);

    $.ajax({
        url: `${baseUrl}search?q=${searchQuery}&type=artist`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    }).done((resp) => {

        
        const artistId = (resp.artists.items[0].id);
        // working with data and appending them on DOM

        $.ajax({
            url: `${baseUrl}artists/${artistId}/top-tracks?country=CZ`,
            type: 'GET',
            datatype: 'json',
            headers: {
                'Authorization': 'Bearer ' + accessToken
            }
        }).done((resp) => {

            // working with data and appending them on DOM

            $.ajax({
                url: `${baseUrl}artists/${artistId}/related-artists`,
                type: 'GET',
                datatype: 'json',
                headers: {
                    'Authorization': 'Bearer ' + accessToken
                }
            }).done((resp) => {

                // working with data and appending them on DOM

                deleteArtist.click(() => {
                   // need to have acces to data from every ajax call.

                })

            });
        });
    });
});