Javascript AJAX偶尔不工作

我正在尝试做一个chrome扩展，它可以获取Youtube视频的ID，但我面临一个问题。对于第一次执行，AJAX调用会给我一个错误，但对于所有后续调用，都可以正常工作。每次打开扩展时都会发生这种情况。我是新手，因此，请原谅我犯的任何新手错误。我的代码：-

function getIDs(data){
    var items = [];
    for(i in data.items){
        items.push(data.items[i].id.videoId.toString());
    }
    for(i in items){
        $('<p>'+items[i]+'</p><br>').appendTo('#results');
    }
}

function getVideo(searchQuery){
    searchQuery = searchQuery.replace(/ /g,'+');
    var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video';
    $.ajax({
        url: queryURL,
        dataType: 'json',
        success: function(data) {   
            getIDs(data);
        },
        error: function(ts){
            alert(ts.responseText);
        }
    });
}

document.addEventListener('DOMContentLoaded',function(){
    var button = document.getElementById('search');
    var div = document.getElementById('results');
    button.addEventListener('click',function(){
        var input = document.getElementById('input');
        var result = input.value;
        getVideo(result);
    });
});

我一辈子都搞不清楚到底出了什么问题。提前谢谢你的帮助

编辑

---

我忘了提，但它给了我一个未定义的错误。对不起

您的问题似乎是，由于AJAX调用是异步的，所以您要检索的数据在第一次执行时没有及时加载。因此，当您调用getIDsdata时，数据可能尚未加载，这就是它在后续调用中工作的原因

解决此问题的一种方法是使用承诺。您可以这样做，而不是使用成功：

    var ids; 

    $.ajax({
        url: queryURL,
        dataType: 'json',
        success: function(data) {   
            ids = data;
        },
        error: function(ts){
            alert(ts.responseText);
        }
    }).then(function(){   
            getIDs(ids); //calls this function *after* the data is retrieved
        });

---

在StackOverflow上做了很好的解释。

我尝试了你的Chrome扩展，并成功地复制了这种行为

以下代码中存在问题：

<form action="#">
    <input type="text" id="input"><br><br>
    <center><button id="search">Click Here!!</button></center>
</form>

---

你可能想知道为什么这只发生在第一次请求时。归根结底，答案是基本上，不是以任何你可以信赖的标准方式。事实上，您可以测试并看到Firefox根本不会重新加载页面，而Chrome会重新加载页面，但这只是第一次。

它给您带来了什么错误？ts.responseText给我提供了未定义的添加console.logts；取而代之的是，检查控制台是否有错误，并在ts上添加监视。查看返回的对象{readyState:0，responseJSON:undefined，status:0，statusText:error}这就是我得到的。有什么线索吗？？顺便说一句，什么是添加手表？我不同意。数据将在success方法中准备好。你链接的答案中的问题略有不同。无论如何。。我试过了，但没用。承诺不是成功的替代品吗？@cthorne你认为这个问题是什么？我同意我可能错了——尽管我以前经历过这个问题，这解决了它。

<button id="search" type="button">Click Here!!</button>