web-dev-qa-db-ja.com

$ qを使用して、AngularJSサービスから解決済みプロミスを返す方法は？

私のサービスは：

myApp.service('userService', [
  '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
    var deferred;
    deferred = $q.defer();
    this.initialized = deferred.promise;
    this.user = {
      access: false
    };
    this.isAuthenticated = function() {
      this.user = {
        first_name: 'First',
        last_name: 'Last',
        email: '[email protected]',
        access: 'institution'
      };
      return deferred.resolve();
    };
  }
]);

私はconfigファイルでこれを次のように呼び出しています：

myApp.run([
  '$rootScope', 'userService', function($rootScope, userService) {
    return userService.isAuthenticated().then(function(response) {
      if (response.data.user) {
        return $rootScope.$broadcast('login', response.data);
      } else {
        return userService.logout();
      }
    });
  }
]);

ただし、thenは関数ではないと文句を言います。解決した約束を返さないのですか？

javascriptangularjspromiseangular-promise
44
user3620820

サービス方法から：

function serviceMethod() {
    return $timeout(function() {
        return {
            property: 'value'
        };
    }, 1000);
}

そしてコントローラーで：

serviceName
    .serviceMethod()
    .then(function(data){
        //handle the success condition here
        var x = data.property
    });
20
Brocco

Angularで事前に解決された約束を単に返す方法

解決された約束：

return $q.when( someValue );    // angular 1.2+
return $q.resolve( someValue ); // angular 1.4+, alias to `when` to match ES6

拒否された約束：

return $q.reject( someValue );
97
Andrey Mikhaylov - lolmaus

Promiseを返し、deferred.promiseを返します。
「then」メソッドを持つのはpromise APIです。

https://docs.angularjs.org/api/ng/service/$q

Resolveの呼び出しはpromiseを返さず、「then」ロジックを実行できるように、promiseが解決されたというpromiseを通知するだけです。

次のような基本パターン、すすぎ、繰り返し
http://plnkr.co/edit/fJmmEP5xOrEMfLvLWy1h?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" 
        src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

<div ng-controller="test">
  <button ng-click="test()">test</button>
</div>
<script>
  var app = angular.module("app",[]);

  app.controller("test",function($scope,$q){

    $scope.$test = function(){
      var deferred = $q.defer();
      deferred.resolve("Hi");
      return deferred.promise;
    };

    $scope.test=function(){
      $scope.$test()
      .then(function(data){
        console.log(data);
      });
    }      
  });

  angular.bootstrap(document,["app"]);

</script>
34
mccainz

サービスの正しいコードは次のとおりです。

myApp.service('userService', [
  '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {

    var user = {
      access: false
    };

    var me = this;

    this.initialized = false;
    this.isAuthenticated = function() {

      var deferred = $q.defer();
      user = {
        first_name: 'First',
        last_name: 'Last',
        email: '[email protected]',
        access: 'institution'
      };
      deferred.resolve(user);
      me.initialized = true;

      return deferred.promise;
    };
  }
]);

その後、コントローラーはそれに応じて調整する必要があります。

myApp.run([
  '$rootScope', 'userService', function($rootScope, userService) {
    return userService.isAuthenticated().then(function(user) {
      if (user) {
        // You have access to the object you passed in the service, not to the response.
        // You should either put response.data on the user or use a different property.
        return $rootScope.$broadcast('login', user.email);  
      } else {
        return userService.logout();
      }
    });
  }
]);

サービスについて注意すべき点はほとんどありません。

  • サービスで公開する必要があるものだけを公開します。ユーザーは内部的に保持され、ゲッターのみがアクセスする必要があります。

  • 関数の場合、javascriptを使用したこのようなEdgeのケースを回避するためのサービスである「me」を使用します。

  • 初期化が何を意味するのかを推測しましたが、間違っていた場合は気軽に修正してください。

4
haimlit

解決された約束を返すには、次を使用できます。

return $q.defer().resolve();

何かを解決するか、データを返す必要がある場合：

return $q.defer().resolve(function(){

    var data;
    return data;

});
2
Jakub Kozlowski

JavaScriptコードを短くするには、次を使用します。

myApp.service('userService', [
  '$q', function($q) {
    this.initialized = $q.when();
    this.user = {
      access: false
    };
    this.isAuthenticated = function() {
      this.user = {
        first_name: 'First',
        last_name: 'Last',
        email: '[email protected]',
        access: 'institution'
      };
      return this.initialized;
    };
  }
]);

オブジェクトのプロパティのみを設定するのではなく、新しいオブジェクトで上書きすることにより、userService.userへのバインドを失うことを知っていますか？

Plnkr.coのサンプルコードの例としての意味を以下に示します（作業例： http://plnkr.co/edit/zXVcmRKT1TmiBCDL4GsC?p=preview ）：

angular.module('myApp', []).service('userService', [
    '$http', '$q', '$rootScope', '$location', function ($http, $q, $rootScope, $location) {
    this.initialized = $q.when(null);
    this.user = {
        access: false
    };
    this.isAuthenticated = function () {
        this.user.first_name = 'First';
        this.user.last_name = 'Last';
        this.user.email = '[email protected]';
        this.user.access = 'institution';
        return this.initialized;
    };
}]);

angular.module('myApp').controller('myCtrl', ['$scope', 'userService', function ($scope, userService) {
    $scope.user = userService.user;
    $scope.callUserService = function () {
        userService.isAuthenticated().then(function () {
            $scope.thencalled = true;
        });
    };
}]);
1
Sebastian

これを試して：

myApp.service('userService', [
    '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
      var deferred= $q.defer();
      this.user = {
        access: false
      };
      try
      {
      this.isAuthenticated = function() {
        this.user = {
          first_name: 'First',
          last_name: 'Last',
          email: '[email protected]',
          access: 'institution'
        };
        deferred.resolve();
      };
    }
    catch
    {
        deferred.reject();
    }

    return deferred.promise;
  ]);
0
premsh