【发布时间】：2021-10-29 07:27:23
【问题描述】：
我的网页中有“使用 facebook 登录”按钮。一切都按预期工作，但问题是在第二次点击时触发了该操作。 我可以在第一次单击时在控制台中看到错误。
HTML 代码：
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<button type="button" v-on:click="logInWithFacebook" class="btn-facebook"><i class="fa fa-facebook"></i>Facebook</button>
</div>
JS 代码：
<script>
import axios from 'axios'
export default {
name:"Login",
data() {
return {
email:'',
password:'',
progress:false,
disabled:false,
emailError:null,
passwordError:null,
error:null,
}
},
methods: {
async initFacebook() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "615100826501510", //You will need to change this
cookie: true, // This is important, it's not enabled by default
version: "v2.6"
});
};
},
async logInWithFacebook() {
this.progress=true
await this.loadFacebookSDK(document, "script", "facebook-jssdk");
await this.initFacebook();
window.FB.login(function(response) {
if (response.status === 'connected'){
window.FB.api('/me?fields=id,name,email', function(response) {
console.log( response) // it will not be null ;)
this.progress = false
})
} else {
alert("User cancelled login or did not fully authorize.");
}
},
{scope: 'public_profile,email'}
);
return false;
},
async loadFacebookSDK(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);
}
}
控制台错误：
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'login')
我在第一次单击时收到此控制台错误，而第二次则正常。我认为错误发生在第一次点击时。
window.FB.login(function(response) {
【问题讨论】：
-
你应该首先阅读更多关于 async/await 如何工作的内容。例如：
loadFacebookSDK和initFacebook不是异步的，因为它们不在其函数体内使用await。马歇尔的答案是正确的。由于initFacebook不是异步的，它同步完成，logInWithFacebook在 Facebook 没有完成加载的情况下继续。
标签： javascript vue.js