AngularJS - 对 Facebook API 的异步调用

Question

我正在尝试使用 AngularJS 调用 Facebook API。

问题是来自 FB API 的所有调用都是异步的，所以我需要知道我在 facebook 上的查询何时可以在 agularjs 中使用。

为此，我在控制器中调用此方法：

Facebook.getLoginStatus();

哪个Facebook是我的服务，定义为：

app.factory('Facebook', function() {

    getLoginStatus: function() {

        FB.getLoginStatus(function(stsResp) {
            console.log(stsResp);
            if(stsResp.authResponse) {
                // User is already logged in
                return true;
            } else {
                // User is not logged in.
                return false;
            }
        });
    }

}

在这种情况下，我想要检查用户是否已登录。如果为真，我将显示一些选项，否则，我将显示登录按钮。

我已经尝试使用 $q.defer() 函数、promise、工厂来观察响应数据，一切。但是任何事情都可以按我的意愿进行。我检查了一些基于Egghead.io 示例的开发示例，但我认为我还没有完全理解 angularjs 中的异步调用。

提前致谢。

Answer 1

如果您想让所有 fb 代码的风格稍微有点棱角分明，请考虑做一些事情，比如将 FB 类封装在提供程序中。 FB 是一个罕见的例子，提供者模式实际上很好用（在配置部分设置你的应用程序 ID）。

这是一个 Angular facebook 提供程序的示例，它具有基本的登录功能和用于进行图形 api 调用的通用方法：

app.provider('facebook', function() {
  var fbReady = false
  this.appID = 'Default';

  function fbInit(appID) {
    (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 = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));  
    window.fbAsyncInit = function() {
     FB.init({
      appId      : appID,
      cookie     : true,  
      xfbml      : true,  
      version    : 'v2.0' 
    });
     fbReady = true;
   }   
 }

 this.setAppID = function(appID) {
  this.appID = appID;
};

this.$get = function() {
  var appID = this.appID;
  var self = this;
  fbInit(appID);

  return {
    graph : function(path, cb) {
      FB.api(path, function(response) {
        cb(response);
      });
    },
    getAuth: function() {
      return self.auth;
    },
    getLoginStatus: function(cb) {
      if (!fbReady) {
        setTimeout(function() { 
          self.$get()['getLoginStatus'](cb);
        } , 100);
        console.log('fb not ready');
        return;
      }
      FB.getLoginStatus(function(response) {
        cb(response);
      });
    },
    login: function(cb) {
      if (!fbReady) {
        self.$get()['login'](cb);
        console.log('fb not ready');
        return;
      }
      FB.login(function(response) {
        if (response.authResponse) {
          self.auth = response.authResponse;
          cb(self.auth);
        } else {
          console.log('Facebook login failed', response);
        }
      }, {"scope" : "manage_notifications"});

    },
    logout: function() {
      FB.logout(function(response) {
        if (response) {
          self.auth = null;
        } else {
          console.log('Facebook logout failed.', response);
        }

      });
    }
  }
}
});

稍后当您想使用它时，只需在配置部分设置您的应用 ID：

app.config(function(facebookProvider){
 facebookProvider.setAppID('<your_app_id>');
})

将其注入控制器：

.controller('MainCtrl', function ($scope, facebook) {

然后在控制器/运行部分执行一些调用：

facebook.graph('/me/notifications', onNotificationsGotten);

Answer 2

这是使用 iTunes API 发出异步 http 请求的一个很好的例子。它也应该可以帮助您弄清楚如何使用 Facebook API 来实现。

Asynchronous HTTP requests in Angular JS

Answer 3

我编写了这个模块 angularjs-facebook 作为提供者，这样在配置中您可以配置您的应用程序 ID，然后您可以使用 facebook 异步调用。还有一些方法可以监听控制器。

https://github.com/ciul/angularjs-facebook

Answer 4

以下是将 Facebook API 包装到 Angular 服务中的完整基本工作示例：

http://plnkr.co/edit/0GRLdWPJOzGFY14irxLT?p=preview

另请参阅我对这个问题的回答（其中有一些 Angular-FB 集成的部分示例）：

AngularJS : Where to use promises?