嵌套 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 或更高版本。如果没有，你可以找到一个很好的包装函数 .

如果您想了解有关 promises 和异步等待的更多信息，我推荐以下视频：JavaScript Promises In 10 Minutes - by Web Dev Simplified 和 The Async Await Episode I Promised - by Fireship.

如果您对上面的代码有疑问，请添加评论。

我希望这能帮助你继续你的项目（并且你在这个过程中学到了一些东西）。

嵌套 ajax 调用的最佳实践

Best practice for nesting ajax calls

javascript

ajax

jquery

spotify

promise