无法将访问令牌从FB.getLoginStatus()保存到var,因为函数未按顺序运行



在学习C/C++之后,我正在尝试自学与Web相关的东西,例如JavaScript和API。这个项目应该是一个简单的网页,它使用Facebook JavaScript SDK登录Facebook并显示个人资料中的信息。我已经成功完成了登录部分,但是由于我需要访问令牌,因此在调用FB.api()函数时遇到问题。现在我正在尝试将访问令牌保存到名为token的 var,但它似乎不起作用。我正在使用三个console.log()进行调试,我发现最后一个/第三个调用返回undefined因为由于某种原因它似乎首先运行(根据 Firefox 中的 F12 开发控制台(。这是怎么回事?

主.js:

function main()
{
var token;
FB.getLoginStatus(function getLoginStatusCallback(response)
{
if (response.status === "connected")
{
document.getElementById("loginButton").style.display = "none";
}
else
{
document.getElementById("loginButton").style.display = "all";
}
//THIS OUTPUTS THE TOKEN SUCCESSFULLY
console.log(response.authResponse.accessToken);
//THIS WORKS
token = response.authResponse.accessToken;
//THIS OUTPUTS THE TOKEN SUCCESSFULLY
console.log(token);
}, true);
//THIS OUTPUTS UNDEFINED!
console.log("token = " + token);
Fb.api("/me", "get", token, function() {
//stuff here
});
}

我如何初始化FB JavaScript SDK并调用main(所以我可以在其他地方使用FB对象(。

脸书.js:

window.fbAsyncInit = function() {
FB.init({
appId: 'my app id here',
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
//CALLING MAIN HERE
main();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

我的 HTML 文件中的标头(首先定义 SDK 初始化(:

<head>
<meta charset="utf-8" />
<title>Profile</title>
<link rel="stylesheet" href="style.css" />
<script src="facebook.js"></script>
<script src="main.js"></script>
</head>

这是来自 Firefox 的开发控制台(第三个控制台.log似乎出于某种原因首先运行,为什么会发生这种情况?

token = undefined   main.js:23:4     <-- I think it should run last but it runs first
TheTokenPrintsHere  main.js:18:7
TheTokenPrintsHere  main.js:20:7

如果有帮助的话,我来自 C/C++,这是我第一次使用 API 和 Web SDK。 谢谢!

你观察到的是JavaScript异步执行代码的结果function getLoginStatusCallback(response)块内的所有代码都将在收到来自 FaceBook 的响应执行(可能需要 2 秒、5 秒或 2 分钟(。

JavaScript 只有一个线程,因此语言设计者使该代码块仅在收到响应时执行。

如果要强制代码同步执行,可以将最后 2 个语句移动到main()的第一个子块内,如下所示:

function main()
{
var token;
FB.getLoginStatus(function getLoginStatusCallback(response)
{
if (response.status === "connected")
{
document.getElementById("loginButton").style.display = "none";
}
else
{
document.getElementById("loginButton").style.display = "all";
}
token = response.authResponse.accessToken;
console.log("token = " + token);
Fb.api("/me", "get", token, function() {
// this will work now.
});
}, true);
}

相关内容

最新更新