我最近一直在摆弄 YouTube Javascript API，但遇到了问题(一如既往!)。
我需要一个函数来返回有关视频的信息数组:
[0: Title, 1: Description, 2: Publish Date, 3: Thumbnail URL]
该函数获取视频的 id，然后使用该 id 执行 video.list。这是该函数:
function getVidInfo(VidId){
var vidRequest;
var vidRequestResponse;
var returnArray = new Array(4);
vidRequest = gapi.client.youtube.videos.list({
part: 'snippet',
id: VidId
});
vidRequest.execute(function(response){
if(response.pageInfo.totalResults != 0) {
returnArray[0] = response.result.items[0].snippet.title;
returnArray[1] = response.result.items[0].snippet.description;
returnArray[2] = response.result.items[0].snippet.publishedAt;
//Check for HD thumbnail
if (response.result.items[0].snippet.thumbnails.maxres.url){
returnArray[3] = response.result.items[0].snippet.thumbnails.maxres.url
}
else {
returnArray[3] = response.result.items[0].snippet.thumbnails.standard.url;
}
console.log(returnArray); //Will log desired return array
}
});
return returnArray; //Not returning desired array
}
正如您从注释中看到的，数组设置正确，但它没有返回该值。
我尝试了什么？
- 使用从
vidRequest.execute() 中调用的函数设置的外部变量 - 从
vidRequest.execute() 返回 - 将响应放入变量中，然后分配数组(给我一个关于 pageInfo
未定义的错误)
注释
- 这似乎是一个异步问题
- 我需要保留
getVidInfo() - 当 Google API 加载时，它肯定会被调用
- 它似乎在初始加载时工作，但刷新会破坏它
- 目前所有信息都会记录到控制台
完整代码
index.html
<!DOCTYPE html>
<html>
<head>
<title>YT Test</title>
<!--My Scripts-->
<script src="test.js"></script>
</head>
<body>
<!-- Load google api last-->
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>
test.js
var apiKey = "[YOUR API KEY]"; //I did set this to my API key
var latestVidUrl;
var request;
var vidId;
var vidInfo;
function googleApiClientReady() {
console.log("Google api loaded");
gapi.client.setApiKey(apiKey);
gapi.client.load('youtube', 'v3', function() {
request = gapi.client.youtube.search.list({
part: 'id',
channelId: 'UCOYWgypDktXdb-HfZnSMK6A',
maxResults: 1,
type: 'video',
order: 'date'
});
request.execute(function(response) {
if(response.pageInfo.totalResults != 0) {
vidId = response.result.items[0].id.videoId;
//console.log(vidId);
vidInfo = getVidInfo(vidId);
console.log(vidInfo);
}
});
});
}
function getEmbedCode(id){
var baseURL = "http://www.youtube.com/watch?v="
return baseURL + id.toString();
}
function getVidInfo(VidId){
var vidRequest;
var vidRequestResponse;
var returnArray = new Array(4);
vidRequest = gapi.client.youtube.videos.list({
part: 'snippet',
id: VidId
});
vidRequest.execute(function(response){
if(response.pageInfo.totalResults != 0) {
returnArray[0] = response.result.items[0].snippet.title;
returnArray[1] = response.result.items[0].snippet.description;
returnArray[2] = response.result.items[0].snippet.publishedAt;
//Check for HD thumbnail
if (response.result.items[0].snippet.thumbnails.maxres.url){
returnArray[3] = response.result.items[0].snippet.thumbnails.maxres.url
}
else {
returnArray[3] = response.result.items[0].snippet.thumbnails.standard.url;
}
console.log(returnArray); //Will log desired return array
}
});
return returnArray; //Not returning desired array
}
最佳答案
我认为问题是你在返回 returnArray 时可能还没有处理它。为了澄清我的意思，即使最后有 return returnArray ，实际的请求仍然会被处理，但代码仍然会继续运行。因此，当它最终得到响应并处理代码时，它会将其正确写入日志，但该函数之前已经返回了 returnArray。如果不测试这是否有效，您可能只需添加一个轮询函数来等待 returnArray 不为 null，只要您从不期望它为 null。也许是这样的:
while(returnArray == null) {
; }
return returnArray;
我将编辑此内容以澄清我的意思:
function getVidInfo(VidId){
var vidRequest;
var vidRequestResponse;
var returnArray = new Array(4);
vidRequest = gapi.client.youtube.videos.list({
part: 'snippet',
id: VidId
});
vidRequest.execute(function(response){
if(response.pageInfo.totalResults != 0) {
returnArray[0] = response.result.items[0].snippet.title;
returnArray[1] = response.result.items[0].snippet.description;
returnArray[2] = response.result.items[0].snippet.publishedAt;
//Check for HD thumbnail
if (response.result.items[0].snippet.thumbnails.maxres.url){
returnArray[3] = response.result.items[0].snippet.thumbnails.maxres.url
}
else {
returnArray[3] = response.result.items[0].snippet.thumbnails.standard.url;
}
console.log(returnArray); //Will log desired return array
}
});
while(returnArray == null) { //Create busy loop to wait for value
; }
return returnArray;
}
关于javascript - YouTube 异步函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27131951/