Youtube API, gapi is not defined?

Question

我正在尝试进行YouTube API，我觉得除了这个gapi和res的东西外，我都可以正常工作吗？它说没有定义GAPI。我该如何完成这项工作？

function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/{{(.*?)}}/g,function(e,r){return t[n][r]})}return res}
$(function() {
    $("form").on("submit", function(e) {
       e.preventDefault();
       // prepare the request
       var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
            maxResults: 3,
            order: "viewCount",
            publishedAfter: "2015-01-01T00:00:00Z"
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("tpl/item.html", function(data) {
                $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
            });
          });
          resetVideoHeight();
       });
    });
    $(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
    $(".video").css("height", $("#results").width() * 9/16);
}
function init() {
    gapi.client.setApiKey("AIzaSyD646m4ZfK5yKBZj9p95LohN-PTUnRHBRY");
    gapi.client.load("youtube", "v3", function() {
    });
}

Answer 1

gapi是由Google API JavaScript库创建的对象，它为您管理所有交互（即对请求的所有繁重提升）。如果未定义对象，则可能未将库本身包含在页面中。在您的HTML中的某个地方，您需要一个脚本标签，该标签加载位于以下位置的库

https://apis.google.com/js/client.js

请注意，在使用脚本标签加载库时，您还应该通过它来回调...这是一个函数，一旦库加载，该函数将自动调用。因此，在您的情况下，您的init（）方法就是回调，因此您的脚本标签看起来像这样：

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

浏览器将获取库，加载它，然后在库加载完成时运行init（），并且在触发时，所有内容都可以使您的表格可以执行。