在 Angular JS 服务中调用 YouTube API 请求

Question

我在创建基于“搜索词”进行简单搜索的 Youtube 服务时遇到问题。我想做的是允许控制器调用我的 youtube 服务（即 searchVideo("dogs")）并以字符串的形式获取视频 ID。

此时，我注意到 requestVideoId 在请求完成执行之前被返回。由于不熟悉 JS，我想要一个示例，说明如何让我的 searchVideo() 函数正确返回 requestVideoId（在请求完成后）。

(function () {
'use strict';

var serviceId = 'youtubeService';
angular.module('app').factory(serviceId, ['common', youtubeService]);

function youtubeService(common) {
    var service = {
        searchVideo: searchVideo
    };

    return service;

    function searchVideo(searchText) {
        var requestVideoId = "";
        var request = gapi.client.youtube.search.list({
            q: searchText,
            part: 'snippet'
        });

        request.execute(function(response) {
            var responseList = response.result;
            console.log(responseList.items[0].id.videoId);
            requestVideoId = responseList.items[0].id.videoId;
        });

        console.log(requestVideoId);
        return requestVideoId;
    }
}
})();

我已经检查过这个问题...YouTube Asynchronous function ...但我想保留 searchVideo() 功能。我可能会遗漏一些东西。提前谢谢。

Answer 1

searchVideo 应该返回一个promise，它会在未来得到解决。比如：

 function searchVideo(searchText) {
        var defer=$q.defer();
        var requestVideoId = "";
        var request = gapi.client.youtube.search.list({
            q: searchText,
            part: 'snippet'
        });

        request.execute(function(response) {
            var responseList = response.result;
            console.log(responseList.items[0].id.videoId);
            requestVideoId = responseList.items[0].id.videoId;
            defer.resolve(requestVideoId);
        });

        console.log(requestVideoId);
        return defer.promise;
    }

现在你可以使用promise api，在promise被解析时注册一个回调：

youtubeService.searchVideo('test') .then(function(requestVideoId) { // can access the id here});

了解what promises are 和how promises work in Angular。