Youtube Data API - 未捕获的类型错误:无法读取未定义的属性“setApiKey”

Youtube Data Api - Uncaught TypeError: Cannot read property 'setApiKey' of undefined

本文关键字：读取 未定义 属性 setApiKey 错误 API Data 类型 Youtube      更新时间：2023-09-26

我用youtube数据api搜索音乐。我使用javascript和jquery，我有一个问题。
这是我的代码

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo SITE_PUBLIC; ?>/bootstrap-3.2.0/dist/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script>
function keyWordsearch(){
    gapi.client.setApiKey('myapikey');
    gapi.client.load('youtube', 'v3', function() {
            data = jQuery.parseJSON( '{ "data": [{"name":"eminem"},{"name":"shakira"}] }' );
            $.each(data["data"], function( index, value ) {
                makeRequest(value["name"]);
            });
    });
    }
    function makeRequest(q) {
        var request = gapi.client.youtube.search.list({
                q: q,
                part: 'snippet', 
                maxResults: 10
        });
        request.execute(function(response)  {                                                                                    
                $('#results').empty()
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                vidTitle = item.snippet.title;  
                vidThumburl =  item.snippet.thumbnails.default.url;                 
                vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';                   
                $('#results').append('<pre>' + vidTitle + vidThumbimg +  '</pre>');                      
        })  
    })  
}   
keyWordsearch();
</script>

此代码不起作用。Chrome 控制台显示"未捕获的类型错误：无法读取未定义的属性'setApiKey'"。但是这段代码是有效的：

keyWordsearch（） 到

$(document).click(function(){
        keyWordsearch()
})

我不明白这个问题。提前
致谢

编辑
我的代码在jsFiddle上运行，但不运行我的html文件。我的 html 文件在这里： 

<!doctype html>
<html>
  <head>
  <title>Search</title>

  </head>
  <body> 
    <div id="container">
      <h1>Search Results</h1>
      <ul id="results"></ul>
    </div>        
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>   
    <script>
     $(function(){
     function keyWordsearch(){
        gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
        gapi.client.load('youtube', 'v3', function() {
                data = jQuery.parseJSON( '{ "data": [{"name":"eminem"}] }' );
                $.each(data["data"], function( index, value ) {
                    makeRequest(value["name"]);
                });
        });
}
    function makeRequest(q) {
        var request = gapi.client.youtube.search.list({
                q: q,
                part: 'snippet', 
                maxResults: 10
        });
        request.execute(function(response)  {                                                                                    
                $('#results').empty()
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                vidTitle = item.snippet.title;  
                vidThumburl =  item.snippet.thumbnails.default.url;                 
                vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';                   
                $('#results').append('<pre>' + vidTitle + vidThumbimg +  '</pre>');                      
        })  
    })  
}
    keyWordsearch();
     })
  </script> 

</body>
</html>

看起来，你还没有加载javascript库。这就是为什么它找不到参考。您可以像这样添加它：

<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

您可以在调用 API 时指定一个初始函数，如下所示： client.js?onload=init（请参阅下面的示例）。除了不需要 doucument.ready（） 包装器。我不确定为什么它在我的本地机器上与您的 API 密钥一起使用，但我想这是某种魔法，可以检查该网站是否可供公众使用 - 如果属实，您的 google 帐户中的引荐来源网址将变得很重要 - 如果有人知道这里到底发生了什么，请纠正我。

我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title></title>
    <!--<link rel="stylesheet" type="text/css" media="screen" href="main.css" />-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script type="text/javascript">
      function makeRequest(q) {
        var request = gapi.client.youtube.search.list({
          q: q,
          part: 'snippet',
          maxResults: 3
        });
        request.execute(function(response) {
          $('#results').empty();
          var resultItems = response.result.items;
          $.each(resultItems, function(index, item) {
            vidTitle = item.snippet.title;
            vidThumburl =  item.snippet.thumbnails.default.url;
            vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';
            $('#results').append('<pre>' + vidTitle + vidThumbimg +  '</pre>');
          });
        });
      }
      function init() {
        gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
        gapi.client.load('youtube', 'v3', function() {
          data = jQuery.parseJSON( '{ "data": [{"name":"orsons"}] }' );
          $.each(data["data"], function(index, value) {
            makeRequest(value["name"]);
          });
        });
      }
    </script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>
  </head>
  <body>
    <h1>YouTube API 3.0 Test</h1>
    <ul id="results"></ul>
  </body>
</html>

除了解释您必须为 Google API 客户端<script>加载行指定并提供回调函数的所有答案之外，我想指出的是，当您从本地文件加载 Google API 客户端时.js onload参数似乎永远不会运行指定的函数（至少在 Chrome 中）（即使您通过网络服务器提供 HTML 页面而不是加载它来自文件系统，这显然似乎是谷歌 API JS 客户端的唯一问题......

例如：

<script src="/lib/js/client.js?onload=handleClientLoad"></script>

尽管将加载client.js，但这永远不会在完成加载后启动handleClientLoad函数。我认为指出这一点会很有用，因为这是一件非常令人沮丧的调试事情。

希望这有帮助。

<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

这必须在最后调用，或者至少在你定义方法"handleClientLoad"之后调用。这是它的回调，只有在它被调用之后 - 这意味着谷歌 API 已经准备好了。这就是为什么你得到gapi.client是空的。

为了好玩，你可以在使用 gapi.client 之前使用几秒钟的超时，看看它不再是空的。

相关文章：