时间戳

首页 > 解决方案 > 嵌套 ajax 调用的最佳实践

javascript - 嵌套 ajax 调用的最佳实践

问题描述

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

                })

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

标签： javascriptjqueryajaxpromisespotify

解决方案

鉴于您的工作案例，您可以考虑以下方法：

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 或更高版本。如果没有，您可以在这里找到一个不错的包装函数。

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

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

我希望这可以帮助您继续您的项目（并且您在此过程中学到了一些东西）。

推荐阅读