141

FBGraphAPIにアクセスするためにpromiseを使用していた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サービスを使用する理由ケースは何ですか?
  • そしてそれはどのように機能しますか?
4

4 に答える 4

401

これはあなたの質問に対する完全な答えにはなりませんが、サービスのドキュメントを読み込もうとするときに、これがあなたや他の人に役立つことを願ってい$qます。それを理解するのに少し時間がかかりました。

少しの間AngularJSを脇に置いて、FacebookAPI呼び出しについて考えてみましょう。どちらのAPI呼び出しも、コールバックメカニズムを使用して、Facebookからの応答が利用可能になったときに呼び出し元に通知します。

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

これは、JavaScriptやその他の言語で非同期操作を処理するための標準パターンです。

このパターンの大きな問題の1つは、一連の非同期操作を実行する必要がある場合に発生します。この場合、連続する各操作は前の操作の結果に依存します。それがこのコードが行っていることです:

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

最初にログインを試み、次にログインが成功したことを確認した後にのみ、GraphAPIにリクエストを送信します。

2つの操作を連鎖させるだけのこの場合でも、物事は厄介になり始めます。メソッドaskFacebookForAuthenticationは失敗と成功のコールバックを受け入れますが、FB.login成功したがFB.api失敗した場合はどうなりますか?successこのメソッドは、メソッドの結果に関係なく、常にコールバックを呼び出しますFB.api

ここで、各ステップでエラーを適切に処理し、数週間後に他の人やあなたにも判読できるように、3つ以上の非同期操作の堅牢なシーケンスをコーディングしようとしていると想像してください。可能ですが、これらのコールバックをネストし続けて、途中でエラーを追跡できなくなるのは非常に簡単です。

それでは、Facebook APIを少し脇に置いて、サービスによって実装されるAngularPromisesAPIについて考えてみましょう$q。このサービスによって実装されるパターンは、非同期プログラミングを線形の一連の単純なステートメントに似たものに戻そうとする試みであり、途中の任意のステップでエラーを「スロー」し、最後にそれを処理する機能を備えています。おなじみtry/catchのブロック。

この不自然な例を考えてみましょう。2つの関数があり、2番目の関数が最初の関数の結果を消費するとします。

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

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

 secondFn(firstFn()); 

ここで、firstFnとsecondFnの両方が完了するまでに長い時間がかかるため、このシーケンスを非同期で処理したいとします。まずdeferred、一連の操作を表す新しいオブジェクトを作成します。

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

プロパティは、チェーンのpromise最終的な結果を表します。作成直後にpromiseをログに記録すると、それが単なる空のオブジェクトであることがわかります({})。まだ見るものはありません。すぐに進んでください。

これまでのところ、私たちの約束はチェーンの出発点にすぎません。次に、2つの操作を追加しましょう。

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

このthenメソッドは、チェーンにステップを追加してから、拡張チェーンの最終的な結果を表す新しいpromiseを返します。ステップはいくつでも追加できます。

これまで、関数のチェーンを設定しましたが、実際には何も起こりません。deferred.resolveチェーンの最初の実際のステップに渡す初期値を指定して、を呼び出すことから始めます。

 deferred.resolve('initial value');

そして...それでも何も起こりません。モデルの変更が適切に観察されるようにするために、Angularは、次回$applyが呼び出されるまで、チェーンの最初のステップを実際には呼び出しません。

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

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

では、エラー処理についてはどうでしょうか。これまでのところ、チェーンの各ステップで 成功ハンドラーを指定しただけです。thenオプションの2番目の引数としてエラーハンドラも受け入れます。これは、Promiseチェーンのもう1つの長い例で、今回はエラー処理を使用しています。

 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のモデル変更を観察する方法に適応させる2つの異なる方法を表していると言います。最初の例では、API呼び出しをpromiseでラップします。これはスコープに追加でき、Angularのテンプレートシステムによって理解されます。$scope.$digest()2つ目は、コールバックの結果をスコープに直接設定し、Angularに外部ソースからの変更を認識させるため に呼び出す、より力ずくのアプローチを採用しています。

最初の例にはログイン手順がないため、2つの例を直接比較することはできません。ただし、一般的には、このような外部APIとのやり取りを個別のサービスにカプセル化し、その結果を約束どおりにコントローラーに配信することが望ましいです。そうすれば、コントローラーを外部の懸念から分離し、モックサービスを使用してより簡単にテストできます。

于 2013-04-01T05:53:52.990 に答える
9

私は両方をカバーする複雑な答えを期待していました:それらが一般的に使用される理由とAngularでそれを使用する方法

これはAngularPromiseMVP 最小実行可能約束)のプランクです:http ://plnkr.co/edit/QBAB0usWXc96TnxqKhuA ?p = Preview

ソース:

(怠惰すぎてリンクをクリックできない人のために)

index.html

  <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.js

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以降、Promiseはテンプレートによって解決されなくなりました。 http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html

(プランカーの例では1.1.5を使用しています。)

于 2014-01-25T23:06:42.593 に答える
2

延期は、非同期操作の結果を表します。状態とそれが表す操作の結果を通知するために使用できるインターフェースを公開します。また、関連付けられたPromiseインスタンスを取得する方法も提供します。

promiseは、関連する延期された操作と対話するためのインターフェースを提供します。したがって、利害関係者が状態と延期された操作の結果にアクセスできるようにします。

延期を作成する場合、その状態は保留中であり、結果はありません。延期されたresolve()またはreject()を実行すると、状態が解決済みまたは拒否済みに変更されます。それでも、据え置きを作成した直後に関連する約束を取得し、将来の結果との相互作用を割り当てることもできます。これらの相互作用は、延期された拒否または解決後にのみ発生します。

于 2015-08-06T02:16:45.380 に答える
1

コントローラ内でpromiseを使用し、データが利用可能かどうかを確認します

 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>

于 2017-01-27T05:47:17.573 に答える