使用 YouTube API 时未定义变量？答案

【问题标题】：Variable not defined when using YouTube API?使用 YouTube API 时未定义变量？
【发布时间】：2015-12-08 14:04:28
【问题描述】：

我在使用 YouTube API 的函数时遇到问题。它是说其中一个变量没有定义，我不确定是什么导致了错误。请帮忙。

http://jsfiddle.net/neowot/p5y4t9co/1/

function QueryGetta0() {
            var TTsearchQuery = 'lana del rey';
            return TTsearchQuery;
}


function QueryGetta1() {            
            $.get(
                "https://www.googleapis.com/youtube/v3/search",{
                    part: 'snippet',
                    maxResults: 1,
                    q: QueryGetta0(),
                    type: 'video',
                    key: 'AIzaSyCvk3NNMQASZgFkCNxIp9jH-l8O0PXhDUo'},
                    function(data) {
                        $.each(data.items, function(i, item){
                            console.log(item);
                            TTsearchResultID = item.id.videoId;
                            console.log(TTsearchResultID);
                        })
                    }
            );  
            return TTsearchResultID;
}



$('#clicker').on('click', function() {        
        alert(QueryGetta1());
});

【问题讨论】：

标签： javascript jquery api youtube

【解决方案1】：

$.get() 方法如 $.ajax() 或 $.json() 是异步方法，这意味着您在代码执行后接收数据 return TTSearchResultID

这是实现您想要实现的目标的一种方法（我还删除了您无用的$.each，因为您只请求了一项）：

function QueryGetta0() {
            var TTsearchQuery = 'lana del rey';
            return TTsearchQuery;
}


function QueryGetta1() {
    return $.get(
                "https://www.googleapis.com/youtube/v3/search",{
                    part: 'snippet',
                    maxResults: 1,
                    q: QueryGetta0(),
                    type: 'video',
                    key: 'AIzaSyCvk3NNMQASZgFkCNxIp9jH-l8O0PXhDUo'}
            );  
}



$('#clicker').on('click', function() {        
        QueryGetta1()
        .done(function(data) { //Inside this function, do everything you want with data
            var TsearchResultID = data.items[0].id.videoId;
            alert(TsearchResultID);
        });
});

小提琴：http://jsfiddle.net/p5y4t9co/6/

解释：

$.get 返回一个 jqXHR 对象。在这个对象上，我们可以使用.done(pCallbackOnSuccess) 或.fail(pCallbackOnFail)。

请求成功时调用.done方法，回调将接收请求的数据作为参数，如果请求遇到错误，则调用.fail，回调将接收错误对象。

同时使用的示例：

    $.get(options)
        .done(function(data) {
            //do what you want with data
        })
        .fail(function(error) {
            //do what you want with the error
        });

【讨论】：