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

您可以在需要注意的getLoginStatus课程中添加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));
  }
}

然后使用包装器中的方法而不是原始FB：

const facebookAPI = new Facebook();


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

反应redux异步加载FB javascript sdk

1 个答案: