如何获取str变量的值?

Question

我正在尝试使用FB API获取URL(str变量)。

当我尝试CONSOLE2console.log(str)时，它显示了包含照片URL的str变量的确切值。

但是当我尝试CONSOLE1它不起作用时。它什么也没印。

是因为一些异步函数吗？如果是，如何编写以下两个语句(请参阅注释 1)工作的代码(一个接一个地执行并不重要，我只希望在我调用getPhoto()的URL CONSOLE1)

注意 1：这两个语句都表示 location.href 和 CONSOLE1，以确保我在Login()函数中获取str的值。

function Login()
{         
FB.login(function(response) {
if (response.authResponse) 
{
getPhoto();
// window.location.href="quiz.html";
//**CONSOLE1** 
console.log(str);
} else 
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_photos,user_videos,publish_actions'});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
document.getElementById("status").innerHTML+=str;
//**CONSOLE2**
console.log(str);     
});
}

Answer 1

这个怎么样：

function Login() {       
FB.login((response) => {
if (response.authResponse) {
getPhoto((str) => {
console.log(str);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_photos,user_videos,publish_actions'});
}
function getPhoto(callback) {
FB.api('/me/picture?type=normal', (response) => {
const str = '<br/><b>Pic</b> : <img src="' + response.data.url + '"/>';
document.getElementById('status').innerHTML += str;
callback(str);     
});
}

还有其他解决方案(例如，使用 Promises)，但使用回调函数非常简单。我还添加了 ES6 语法(const，箭头函数)。

您还可以使用FB.getLoginStatus来检查用户是否在页面加载时登录，并在该函数的回调中调用getPhoto。

例如：http://www.devils-heaven.com/facebook-javascript-sdk-login/

Answer 2

在CONSOLE2块中，显式定义变量 str：

var str=...

但是在CONSOLE1块中，您从未真正定义过变量。当函数getPhoto终止时，变量str超出范围，不再存在。

要修复它，请将您的逻辑放在FB.api调用的回调函数中。您可以将该调用放在FB.login回调函数中，而不是放在其自己的函数中。喜欢这个：

FB.login(function(response) {
if (response.authResponse) {
FB.api('/me/picture?type=normal', function(response) {
...

在javascript中，你必须链接或嵌套你的回调。您必须等待登录回调，然后进行下一个 API 调用，然后进行获取图片回调等。

Answer 3

str var 的作用域保留在 getPhoto 函数内。为了在CONSOLE1中获取值，您需要从getPhoto函数返回str的值。

希望这对你有帮助。