反应Redux的异步加载JavaScript的FB SDK

Question

我有它加载的JavaScript SDK这就好比一个功能：

class Facebook{ 
    constructor(){ 
     window.fbAsyncInit =() => { 
       FB.init({ 
        appId  : 'myappID', 
        cookie  : true, 
        xfbml  : true, 
        version : 'v2.5' 
       }); 

      } 
     if (typeof(FB) == 'undefined') { 
      ((d, s, id) => { 
       let js, fjs = d.getElementsByTagName(s)[0]; 
       if (d.getElementById(id)) return; 
       js = d.createElement(s); 
       js.id = id; 
       js.src = "//connect.facebook.net/en_US/sdk.js"; 
       fjs.parentNode.insertBefore(js, fjs); 
      })(document, 'script', 'facebook-jssdk'); 
     } 
    } 
} 

export default Facebook 

而且在我的组件如果用户通过Facebook登录我检查。所以在我ComponentDidMount我做这样的事情......

let facebook = new Facebook() 
console.log(FB) 
FB.getLoginStatus(function(response){ 
    if(response.status == "connected"){ 
    //Do something 
} 
}) 

这里同时FB加载异步我console.log(FB)首先调用。所以它给我错误FB没有定义。

但是，如果我做console.log(FB)在ComponentWillUnmount它不会给出错误，而是它会给出所需的输出。

如何异步加载sdk，然后只检查FB.getLoginStatus。

需要一些帮助......

Answer 1

您可以在Facebook类，需要照顾，并会等到Facebook的脚本将被载入

class Facebook { 

    initFbScript() { 
    if(!this.scriptPromise) { 
     this.scriptPromise = new Promise((resolve, reject) => { 
     window.fbAsyncInit =() => { 
      FB.init({/*FB init parameters*/}); 
      resolve(); 
     }; 
     if (typeof(FB) == 'undefined') { 
      // load Facebook script... 
     } 
     }) 
    } 
    return this.scriptPromise; 
    } 

    getLoginStatus(callback) { 
    return this.initFbScript().then(() => FB.getLoginStatus(callback)); 
    } 
} 

然后使用该方法从您的包装，而不是添加getLoginStatus方法原料FB：

const facebookAPI = new Facebook(); 


facebookAPI.getLoginStatus(function(response){ 
    if(response.status == "connected"){ 
    //Do something 
    } 
})