programing

Angular로부터 해결된 약속을 반환하는 방법$q를 사용하는 JS 서비스?

powerit 2023. 2. 22. 23:16
반응형

Angular로부터 해결된 약속을 반환하는 방법$q를 사용하는 JS 서비스?

서비스 내용:

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@address.com',
        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함수가 아닙니다.내가 그 다짐을 돌려주는 거 아니야?

Angular에서 미리 해결한 약속을 간단히 반환하는 방법JS

해결 약속:

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

거절된 약속:

return $q.reject( someValue );

약속을 반환하고, return delerated.promise를 반환하십시오.
'then' 메서드를 가진 약속 API입니다.

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

해결 호출은 약속을 반환하지 않습니다.약속이 해결되었음을 나타내는 약속일 뿐이므로 '그때' 로직을 실행할 수 있습니다.

기본 패턴은 다음과 같이 헹구고 반복합니다.
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>

서비스 방법:

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

또한 컨트롤러:

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

다음은 서비스에 대한 올바른 코드입니다.

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@address.com',
        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();
      }
    });
  }
]);

서비스에 관한 주의사항:

  • 서비스에서는 필요한 부분만 노출합니다.사용자는 내부적으로 보관해야 하며 getters만 접근해야 합니다.

  • 기능 시에는 Javascript로 엣지 케이스를 회피하는 서비스인 'me'를 사용합니다.

  • 초기화가 무엇을 의미하는지 추측했으므로, 내가 추측을 틀렸다면 언제든지 정정해 주세요.

해결된 약속을 반환하려면 다음을 사용합니다.

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

문제를 해결하거나 데이터를 반환해야 하는 경우:

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

    var data;
    return data;

});

짧은 JavaScript-Code의 경우 다음을 사용합니다.

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@address.com',
        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@address.com';
        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;
        });
    };
}]);

이것을 시험해 보세요.

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@address.com',
          access: 'institution'
        };
        deferred.resolve();
      };
    }
    catch
    {
        deferred.reject();
    }

    return deferred.promise;
  ]);

언급URL : https://stackoverflow.com/questions/23567430/how-to-return-a-resolved-promise-from-an-angularjs-service-using-q

반응형

'programing' 카테고리의 다른 글

create-module-app, 설치 오류("명령어를 찾을 수 없음")  (0) 2023.02.22
Spring Boot Dev Tools 프로덕션에서 전원을 끄시겠습니까?  (0) 2023.02.22
AJAX의 구조  (0) 2023.02.22
하위 도메인에 WordPress를 설치하는 방법  (0) 2023.02.22
오류: [$injector:unpr] 알 수 없는 공급자: Angular입니다.JS 서비스 테스트  (0) 2023.02.22

'programing'의 다른글

  • 현재글Angular로부터 해결된 약속을 반환하는 방법$q를 사용하는 JS 서비스?

관련글

댓글

티스토리툴바