AngularJSで同期のように非同期関数を書く

3532 ワード

AngularJSのData-bindingおかげで、ModelのObjectに変更があると、
すぐに$watchに捉えられ、Viewに反映することができます。

この特性をうまく利用すれば、非同期のものでも同期のように書けるのです。
例えば、下のように

var fooApp = angular.module('fooApp');

fooApp.controller('userCtrl', function($scope, User) {
    $scope.user = User.getUser('foo'); // 同期のようにしか見えないよね（ﾄﾞﾔｯ
});

引き続きUser Serviceの実装を見ていきます

fooApp.factory('User', function($http) {
    return {
        getUser: function (username) {
            // 1.空きObjectを作成し
            result = {}

            $http.get('/api/user/' + username).success(function(data) {
                // 3.データ取得できたら、元のObjectに内容を追加
                angular.extend(result, data);
            });

            // 2.とりあえずObjectのPointerだけを渡す
            return result;
        }
    }
});

まとめれば、
1.うまくPointerだけを先に返し、
2.Responseが来たら、前のPointerを拾って、内容を流し込む
という手順でやると、非同期も同期のように書けるわけです。

この仕組みはAngularJSだけではなく、
ほかにData-bindingのできるフレームワークでも行けると思います。

Author And Source

この問題について(AngularJSで同期のように非同期関数を書く), 我々は、より多くの情報をここで見つけました https://qiita.com/toruta39/items/2de08b73fddb72270ffb

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

hdu1217