在学习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);
}