将 API 请求从控制器卸载到服务

Offload API request from controller to service

我将对 Twitter API 的调用从我的控制器卸载到服务中:

angular.module('main')
  .service('Tweet', function ($log, $http, Config, $ionicLoading) {

    this.show = function () {
      $ionicLoading.show({
        template: '<ion-spinner></ion-spinner><br>Loading'
      }).then(function () {
        $log.log("The loading indicator is now displayed");
      });
    };

    this.hide = function () {
      $ionicLoading.hide().then(function () {
        $log.log("The loading indicator is now hidden");
      });
    };


    var consumerKey = encodeURIComponent(Config.TWITTER.CONSUMERKEY);
    var consumerSecret = encodeURIComponent(Config.TWITTER.CONSUMERSECRET);
    var tokenCredentials = btoa(consumerKey + ':' + consumerSecret);

    this.getToken = function () {
      this.show();

      return $http({
        method: 'POST',
        url: 'https://api.twitter.com/oauth2/token',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          'Authorization': 'Basic ' + tokenCredentials
        },
        data: 'grant_type=client_credentials'
      })
        .then(function (result) {
          if (result.data && result.data.access_token) {
            $http.defaults.headers.common.Authorization = 'Bearer ' + result.data.access_token;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    };

    this.getTimeline = function () {
      $log.log($http.defaults.headers.common.Authorization);
      return $http({
        method: 'GET',
        url: 'https://api.twitter.com/1.1/search/tweets.json?q=%40postbank',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      })
        .then(function (result) {
          return result.data.statuses;
        })
        .catch(function (error) {
          console.log(error);
        });
    };

    this.analyzeResult = function (input) {
      this.tweets = input;
      this.hide();
    };

    var that = this;

    this.getTweets = function () {
      this.getToken()
        .then(this.getTimeline)
        .then(function (result) {
          that.analyzeResult(result);
        });
    }

  });

我将服务注入我的主控制器并调用 getTweets() 函数:

angular.module('main')
  .controller('MainCtrl', function ($log, Tweet) {

    Tweet.getTweets();
  });

我可以看到所有的承诺都是通过控制台执行的,但是 this.tweets 仍然是空的。如何将来自 service/promise 的数据发送到控制器?

服务构造函数中的

this 是服务的上下文,而不是控制器的。并且服务不应在范围内运行。

在控制器中展开服务承诺:

var self = this;
Tweet.getTweets().then(function () {
  self.tweets = input;
});