Question

我的按钮有问题。我的搜索结果似乎正确，但是我必须单击两次按钮才能真正显示结果。我正在从Spotify API中获取数据。

这是相关的代码行

HTML文件中的按钮代码

<a id="genre-search-button" class="btn btn-secondary btn-block -light" form button>Search by Genre</a>

JS中的jQuery Click事件

genreSearchButton.click(function (event) {
    row.innerHTML = resultContent.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
    fetchByGenre(genreInput.value);

    amplify.store('contentKey', mainContent.innerHTML);
    event.preventDefault();
});

呈现结果的功能

function renderArtistGenreResults(data) {
    resultContent.innerHTML = '';
    resultContent.append(resultHeader);
    resultContent.append(artistHeader);
    for (let i = 0; i < 3; i++) {
        let randomNum = Math.floor(Math.random() * (data.tracks.length - 1));
        appendArtist(data.tracks[randomNum].artists[0].id);
    }
}

将曲目附加到resultContent的功能

function appendTrack(trackID) {
    resultContent.append('<div class="col-xl-6">' + trackEmbedTemplate.replace('{trackID}', trackID) + '</div>');
}

获取数据的功能

function fetchByGenre(genre) {
    // searches for artist recommendations
    return fetch(genreUrl.replace('{genre}', genre), {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + _token
            }
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            resultHeader.textContent = 'Recommendations Based On ' + genre;
            renderArtistGenreResults(data);
        })
        .then(function () {
            // searches for song recommendations
            fetch(relatedGenreTrackUrl.replace('{genre}', genre), {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + _token
                    }
                })
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    resultContent.append(songHeader);
                    for (let i = 0; i < 10; i++) {
                        appendTrack(data.tracks[i].id);
                    }
                });
        })
        .then(function () {
            if (document.getElementById('error-message') != null) {
                document.getElementById('error-message').parentNode.removeChild(document.getElementById('error-message'));
            }
        })
        .catch(function () {
            renderError();
        });
}

fetchByGenre函数具有两次提取。第一个获取基于类型的歌手推荐，第二个获取基于类型的歌曲推荐。我还尝试在整个函数中放置几个console.logs，它们都在第一次单击时成功登录，但是直到我单击第二次后，结果才显示出来。另外，浏览器在第二次单击之前不会显示“ Waiting for open.spotify.com”，因此我认为这可能与我的提取功能有关。

在“网络”标签上，首次点击后会显示抓取内容。其余数据将在第二次单击后显示。

Link to picture

编辑：我更多地研究了异步调用，并对函数进行了一些编辑。现在，每个then语句都返回一些内容，但是我仍然遇到相同的问题。更新的代码：

function fetchByGenre(genre) {
    // searches for artist recommendations
    return fetch(genreUrl.replace('{genre}', genre), {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + _token
            }
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            resultHeader.textContent = 'Recommendations Based On ' + genre;
            renderArtistGenreResults(data);
            return fetch(relatedGenreTrackUrl.replace('{genre}', genre), {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + _token
                }
            })
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            resultContent.append(songHeader);
            for (let i = 0; i < 10; i++) {
                appendTrack(data.tracks[i].id);
            }
            return data;
        })
        .then(function () {
            if (document.getElementById('error-message') != null) {
                document.getElementById('error-message').parentNode.removeChild(document.getElementById('error-message'));
            }
        })
        .catch(function () {
            renderError();
        });
}

这些XMLHttpRequest是在第一次单击后记录的。

First Click

这些将在第二次单击后记录。似乎第一次单击中获取的两个相同内容在第二次单击中再次被加载，但是XHR也在第二次单击中被加载，我如何在第一次单击中全部加载它们？

Second click

必须单击两次按钮才能显示结果

0 个答案: