嵌套 ajax 調用的最佳實踐

Question

我正在使用 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.

                })

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

Answer 1

鑒於您的工作案例，您可以考慮以下方法：

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

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

    const artistId = artists.items[0].id;
    let topTracks = await $.ajax({
        url: `${baseUrl}artists/${artistId}/top-tracks?country=CZ`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    });

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

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

這是假設您使用的是 jQuery 3.0 或更高版本。 如果沒有，您可以在這里找到一個不錯的包裝器 function。

如果您想了解有關承諾和異步等待的更多信息，我推薦以下視頻： JavaScript Promises In 10 Minutes - by Web Dev Simplified和The Async Await Episode I Promised - by Fireship 。

如果您對上面的代碼有任何疑問，請添加評論。

我希望這可以幫助您繼續您的項目（並且您在此過程中學到了一些東西）。