0

我有一个调用 API（我们称之为 API-1）来获取歌词的函数。由于此 API 有时无法在其数据库中找到歌曲，因此我想调用另一个 API（我们称之为 API-2）进行相同的搜索。

当第一个没有获取数据时，我需要将两个 API 的代码集成到函数中。

我告诉你一些非常重要的信息：

在API-1中，我必须强制以XML 格式获取数据，并且responseType必须是“文档”。

API-2不需要上述任何条件，数据被打包为JSON并且它支持的 responseType 是'text'，但不需要设置它，'document' 它不起作用，它会给出错误。

现在我将分享 API-1 的功能代码，然后我将分享 API-2 的相同功能代码。

如果我独立测试它们，它们都可以完美运行。

我要求的帮助是在 API-1 不获取数据时集成 API-2。

使用 API-1 的代码

this.refreshLyric = function (currentSong, currentArtist) {
        var xhr = new XMLHttpRequest;
        xhr.open('GET', proxy_URL + api_URL + 'apiv1.asmx/SearchLyricDirect?artist=' + currentArtistE + '&song=' + ucwords(currentSongE), true);

        // ONLY FOR THIS XMLHttpRequest responseType must be empty string or 'document'
        xhr.responseType = 'document';

        // ONLY FOR THIS XMLHttpRequest force the response to be parsed as XML
        xhr.overrideMimeType('text/xml');

        xhr.onload = function () {
          if (xhr.readyState === xhr.DONE && xhr.status === 200) {
                                
                var openLyric = document.getElementsByClassName('lyrics')[0];
                var lyric = xhr.responseXML.getElementsByTagName('Lyric')[0].innerHTML;
                        
                //check if any data was obtained    
                if (lyric != '') {
                    document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
                    openLyric.style.opacity = "1";
                    openLyric.setAttribute('data-toggle', 'modal');
                } else { /////// HERE INTEGRATE  API-2 //////
                    openLyric.style.opacity = "0.3";
                    openLyric.removeAttribute('data-toggle');

                    var modalLyric = document.getElementById('modalLyrics');
                    modalLyric.style.display = "none";
                    modalLyric.setAttribute('aria-hidden', 'true');
                    (document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
                }
            } else {
                document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
                document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
            }
        };
        xhr.send();
    }

使用 API-2 的相同代码

this.refreshLyric = function (currentSong, currentArtist) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                var data = JSON.parse(this.responseText);

                var openLyric = document.getElementsByClassName('lyrics')[0];
                var lyric = data.mus[0].text;
                
                //check if any data was obtained
                if (lyric != '') {
                    document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
                    openLyric.style.opacity = "1";
                    openLyric.setAttribute('data-toggle', 'modal');
                } else {
                    openLyric.style.opacity = "0.3";
                    openLyric.removeAttribute('data-toggle');

                    var modalLyric = document.getElementById('modalLyrics');
                    modalLyric.style.display = "none";
                    modalLyric.setAttribute('aria-hidden', 'true');
                    (document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
                }
            } else {
                document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
                document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
            }
        }
        xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
        xhttp.send()
    }

共享代码是同一个函数（this.refreshLyric），需要集成的只是XMLHttpRequest API。

在 API-1 第 23 行的 ELSE 中，我必须集成 API-2 的代码。

我已经以多种方式尝试过，但是我遇到了 IF - ELSE 条件的语法问题以及获取 API-1 的 responseType 和 MimeType 的 API-2 的错误。

4

1 回答 1

0

编辑

修复：当 API-1 找不到歌词时，我创建了一个调用 API-2 的新函数。refreshLyric2(currentSong, currentArtist);:)

    this.refreshLyric = function (currentSong, currentArtist) {
                
                var xhr = new XMLHttpRequest;
                xhr.open('GET', proxy_URL + api_URL + 'apiv1.asmx/SearchLyricDirect?artist=' + currentArtistE + '&song=' + ucwords(currentSongE), true);
        
                // ONLY FOR THIS XMLHttpRequest responseType must be empty string or 'document'
                xhr.responseType = 'document';
        
                // ONLY FOR THIS XMLHttpRequest force the response to be parsed as XML
                xhr.overrideMimeType('text/xml');
        
                xhr.onload = function () {
                  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
                                        
                        var openLyric = document.getElementsByClassName('lyrics')[0];
                        var lyric = xhr.responseXML.getElementsByTagName('Lyric')[0].innerHTML;
                                
                        //check if any data was obtained    
                        if (lyric != '') {
                            document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
                            openLyric.style.opacity = "1";
                            openLyric.setAttribute('data-toggle', 'modal');
                        } else {
                            //If lyric was not obtained, we call API-2
                            refreshLyric2(currentSong, currentArtist);
                        }
                    } else {
                        document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
                        document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
                    }
                };
                xhr.send();
}
            
                refreshLyric2 = function (currentSong, currentArtist) {
                    
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        var data = JSON.parse(this.responseText);
        
                        var openLyric = document.getElementsByClassName('lyrics')[0];
                        var lyric = data.mus[0].text;
                        
                        //check if any data was obtained
                        if (lyric != '') {
                            document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
                            openLyric.style.opacity = "1";
                            openLyric.setAttribute('data-toggle', 'modal');
                        } else {
                            openLyric.style.opacity = "0.3";
                            openLyric.removeAttribute('data-toggle');
        
                            var modalLyric = document.getElementById('modalLyrics');
                            modalLyric.style.display = "none";
                            modalLyric.setAttribute('aria-hidden', 'true');
                            (document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
                        }
                    } else {
                        document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
                        document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
                    }
                }
                xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
                xhttp.send()
            }
于 2020-07-15T20:05:22.127 回答