약속을 어디에 쓰나요?

약속을 어디에 쓰나요?

FB Graph API에 접속하기 위해 약속을 사용한 Facebook 로그인 서비스의 예를 보았습니다.

예 1:

this.api = function(item) {
  var deferred = $q.defer();
  if (item) {
    facebook.FB.api('/' + item, function (result) {
      $rootScope.$apply(function () {
        if (angular.isUndefined(result.error)) {
          deferred.resolve(result);
        } else {
          deferred.reject(result.error);
        }
      });
    });
  }
  return deferred.promise;
}

, 「 」를 사용한 ."$scope.$digest() // Manual scope evaluation"을 때, 「 「 」

예 2:

angular.module('HomePageModule', []).factory('facebookConnect', function() {
    return new function() {
        this.askFacebookForAuthentication = function(fail, success) {
            FB.login(function(response) {
                if (response.authResponse) {
                    FB.api('/me', success);
                } else {
                    fail('User cancelled login or did not fully authorize.');
                }
            });
        }
    }
});

function ConnectCtrl(facebookConnect, $scope, $resource) {

    $scope.user = {}
    $scope.error = null;

    $scope.registerWithFacebook = function() {
        facebookConnect.askFacebookForAuthentication(
        function(reason) { // fail
            $scope.error = reason;
        }, function(user) { // success
            $scope.user = user
            $scope.$digest() // Manual scope evaluation
        });
    }
}

JSFiddle

질문은 다음과 같습니다.

• 위의 예에서는 어떤 차이가 있습니까?
• $q 서비스를 이용하는 이유와 사례는 무엇입니까?
• 어떻게 작동하죠?

에 대한 , 이 이 할 때 에게 도움이 를 바랍니다.$q는 그것을 이해하는데 .★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★♪

Angular는 따로 두자.JS는 잠시 Facebook API 호출에 대해 생각해 보십시오.두 API 콜 모두 콜백메커니즘을 사용하여 Facebook으로부터의 응답을 이용할 수 있을 때 발신자에게 통지합니다.

  facebook.FB.api('/' + item, function (result) {
    if (result.error) {
      // handle error
    } else {
      // handle success
    }
  });
  // program continues while request is pending
  ...

이는 JavaScript 및 기타 언어로 비동기 작업을 처리하기 위한 표준 패턴입니다.

이 패턴의 큰 문제는 일련의 비동기 조작을 실행할 필요가 있을 때 발생합니다.각 연속 조작은 이전 조작의 결과에 따라 달라집니다.이것이 이 코드가 하는 일입니다.

  FB.login(function(response) {
      if (response.authResponse) {
          FB.api('/me', success);
      } else {
          fail('User cancelled login or did not fully authorize.');
      }
  });

먼저 로그인을 시도하고 로그인이 성공한 것을 확인한 후에야 Graph API에 요청을 합니다.

이 경우에도 두 가지 작업만 연계하면 일이 꼬이기 시작합니다. 법askFacebookForAuthentication만, 「실패와 성공을 위해서」라고 하는 은, 「실패가 있다」라고 하는 경우에 하는 동작입니다.FB.login하지만 '''는 성공한다''FB.api 이 패를 합니까? 이 메서드는 항상 다음 명령을 호출합니다.success에 콜백합니다.FB.api★★★★★★ 。

3개 이상의 비동기 조작으로 이루어진 견고한 시퀀스를 각 단계에서 적절하게 처리하여 다른 사용자나 사용자가 몇 주 후에 읽을 수 있도록 코드화한다고 가정해 보겠습니다.그럴 수도 있지만 콜백을 계속 중첩하면 오류가 발생할 수 있습니다.

Angular API에 Promise$q 을 일련의 과 같은 에서든 오류를 수 으로는 익숙한 문장과 .떤 단계에서든 오류를 '던져' 마지막에 처리할 수 있으며, 의미적으로는 익숙한 것과 유사합니다.try/catch

이 계획된 예를 생각해 봅시다.예를 들어, 두 번째 함수는 첫 번째 함수의 결과를 소비합니다.

 var firstFn = function(param) {
    // do something with param
    return 'firstResult';
 };

 var secondFn = function(param) {
    // do something with param
    return 'secondResult';
 };

 secondFn(firstFn()); 

첫 번째 Fn과 두 번째 Fn 모두 완료하는 데 시간이 오래 걸리기 때문에 이 시퀀스를 비동기적으로 처리합니다.우선, 새로운 것을 작성한다.deferred.object: 객체: object: object: 체체체체체체 object object 。

 var deferred = $q.defer();
 var promise = deferred.promise;

promise이치노물건(약속은 비어있다)인 을 알 수 {}을 사용하다 계속 진행하십시오.

지금까지 우리의 약속은 사슬의 출발점일 뿐이다.이제 두 가지 연산을 추가하겠습니다.

 promise = promise.then(firstFn).then(secondFn);

thenmethod는 체인에 스텝을 추가한 후 확장 체인의 최종 결과를 나타내는 새로운 약속을 반환합니다.원하는 수만큼 단계를 추가할 수 있습니다.

지금까지 기능 체인을 셋업했지만 실제로는 아무 일도 일어나지 않았습니다..deferred.resolve체인의 첫 번째 실제 스텝에 전달할 초기값을 지정합니다.

 deferred.resolve('initial value');

모델 는 다음 번까지 의 첫 하지 않습니다.$apply고고부부부부다다

 deferred.resolve('initial value');
 $rootScope.$apply();

 // or     
 $rootScope.$apply(function() {
    deferred.resolve('initial value');
 });

에러 처리는 어떻습니까?지금까지는 체인의 각 단계에서 성공 핸들러를 지정했을 뿐입니다. then는 에러 핸들러도 옵션의 두 번째 인수로 받아들입니다.다음은 약속 체인의 또 다른 긴 예를 제시하겠습니다.이번에는 에러 처리를 실시합니다.

 var firstFn = function(param) {
    // do something with param
    if (param == 'bad value') {
      return $q.reject('invalid value');
    } else {
      return 'firstResult';
    }
 };

 var secondFn = function(param) {
    // do something with param
    if (param == 'bad value') {
      return $q.reject('invalid value');
    } else {
      return 'secondResult';
    }
 };

 var thirdFn = function(param) {
    // do something with param
    return 'thirdResult';
 };

 var errorFn = function(message) {
   // handle error
 };

 var deferred = $q.defer();
 var promise = deferred.promise.then(firstFn).then(secondFn).then(thirdFn, errorFn);

이 예에서 알 수 있듯이 체인 내의 각 핸들러는 트래픽을 다음 성공 핸들러가 아닌 다음 오류 핸들러로 전송할 수 있습니다.대부분의 경우 체인의 끝에 단일 오류 핸들러가 있을 수 있지만 복구를 시도하는 중간 오류 핸들러가 있을 수도 있습니다.

예시(및 질문)로 바로 돌아가기 위해, Facebook의 콜백 지향 API를 Angular의 모델 변경 관찰 방식에 적응시키는 두 가지 다른 방법을 나타낸다고 말씀드리겠습니다.첫 번째 예시는 API 호출을 약속으로 묶고, 이는 스코프에 추가할 수 있으며 Angular의 템플릿시스템에 의해 이해됩니다., 「」를 호출하는, 를 채용하고 .$scope.$digest()앵귤러

첫 번째 예에서는 로그인 스텝이 누락되어 있기 때문에 두 예는 직접 비교할 수 없습니다.그러나 일반적으로 이와 같은 외부 API와의 상호작용을 별도의 서비스로 캡슐화하고 그 결과를 컨트롤러에 약속으로 제공하는 것이 바람직합니다.이렇게 하면 컨트롤러를 외부 문제와 분리하여 모의 서비스를 통해 보다 쉽게 테스트할 수 있습니다.

일반적으로 사용되는 이유와 Angular에서 사용하는 방법 두 가지를 모두 포함하는 복잡한 답변을 기대했습니다.

각진 약속 MVP(최소 실행 가능한 약속)의 플랭크입니다.http://plnkr.co/edit/QBAB0usWXc96TnxqKhuA?p=preview

출처:

(링크를 클릭하기 귀찮은 사용자용)

index.displaces를 표시합니다.

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="myModule" ng-controller="HelloCtrl">
    <h1>Messages</h1>
    <ul>
      <li ng-repeat="message in messages">{{ message }}</li>
    </ul>
  </body>

</html>

app.module

angular.module('myModule', [])

  .factory('HelloWorld', function($q, $timeout) {

    var getMessages = function() {
      var deferred = $q.defer();

      $timeout(function() {
        deferred.resolve(['Hello', 'world']);
      }, 2000);

      return deferred.promise;
    };

    return {
      getMessages: getMessages
    };

  })

  .controller('HelloCtrl', function($scope, HelloWorld) {

    $scope.messages = HelloWorld.getMessages();

  });

(Facebook의 구체적인 예를 해결하지 못하는 것은 알지만, 다음의 스니펫이 도움이 됩니다.)

경유: http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/

---

2014년 2월 28일 갱신: 1.2.0 이후로는 약속은 더 이상 템플릿으로 해결되지 않습니다. http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html

(플런커 예에서는 1.1.5를 사용합니다).

지연은 비동기 연산의 결과를 나타냅니다.스테이트와 그 스테이트가 나타내는 동작의 결과를 시그널링 하기 위해서 사용할 수 있는 인터페이스를 공개합니다.또한 연관된 약속 인스턴스를 가져오는 방법도 제공합니다.

약속은 관련된 지연과 상호 작용하기 위한 인터페이스를 제공하므로 이해 당사자들이 지연된 운영의 상태 및 결과에 액세스할 수 있습니다.

지연을 생성할 때 보류 상태이며 아무 결과도 없습니다.지연을 해결() 또는 거부()하면 상태가 해결됨 또는 거부됨으로 변경됩니다.그러나 우리는 지연된 결과를 만든 직후에 관련 약속을 얻을 수 있고 심지어 미래의 결과와 상호작용을 할당할 수도 있습니다.이러한 상호 작용은 지연된 거부 또는 해결된 후에만 발생합니다.

컨트롤러 내에서 약속을 사용하여 데이터 사용 가능 여부를 확인합니다.

 var app = angular.module("app",[]);
      
      app.controller("test",function($scope,$q){
        var deferred = $q.defer();
        deferred.resolve("Hi");
        deferred.promise.then(function(data){
        console.log(data);    
        })
      });
      angular.bootstrap(document,["app"]);

<!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>
  </head>

  <body>
    <h1>Hello Angular</h1>
    <div ng-controller="test">
    </div>
  </body>

</html>

언급URL : https://stackoverflow.com/questions/15604196/angularjs-where-to-use-promises