2017-06-11 5 views
1

サービスAngularJsで互いに依存する並列および順次関数呼び出しを使用するにはどうすればよいですか?

(function() { 
    'use strict'; 

    angular 
     .module('app.user') 
     .factory('myService', Service); 

    Service.$inject = ['$http', 'API_ENDPOINT', '$q']; 

    /* @ngInject */ 
    function Service($http, API_ENDPOINT, $q) { 


     var getUserDetails = function (paramData) { 
      return $q(function (resolve, reject) { 
       $http.get(API_ENDPOINT.url + '/user/details', paramData).then(function (result) { 
        if (result.data.success) { 
         resolve(result.data); 
        } else { 
         reject(result.data.msg); 
        } 
       }); 
      }); 
     }; 

     var getCountryDetails = function (paramData) { 
      return $q(function (resolve, reject) { 
       $http.get(API_ENDPOINT.url + '/country/details', paramData).then(function (result) { 
        if (result.data.success) { 
         resolve(result.data); 
        } else { 
         reject(result.data.msg); 
        } 
       }); 
      }); 
     }; 


     return { 
      getUserDetails: getUserDetails, 
      getCountryDetails: getCountryDetails 
     }; 
    } 
})(); 

コントローラ

(function() { 
    'use strict'; 

angular 
    .module('app.user') 
    .controller('myService'); 

/* @ngInject */ 
function UserCtrl(userService,countryService) { 
    var vm = this; 

    vm.onCountryChange = function (id) { 
     vm.states = vm.countries.filter(function (item) { 
      return item.id === id; 
     })[0].states; 
    }; 

    function init() { 

     var token = window.localStorage.getItem('TOKEN'); 
     vm.userData = jwt_decode(token); 

     // gets all country and its states 
     myService.getCountryDetails() 
      .then(function(msg){ 
       vm.countries = msg.data; 
      },function(errMsg){ 
       console.log(errMsg) 
      }); 

     var paramData = { 
      params : { 
       id : vm.userData.id 
      } 
     }; 


     // gets user data 

     myService.getUserDetails(paramData) 
      .then(function (msg) { 
       vm.user = msg.data.map(function (obj) { 
        var rObj = { 
         name: obj.name, 
         email: obj.email, 
         country : obj.country.id, 
         state : obj.state.id 
        }; 
        return rObj; 
       })[0]; 
       // once user data is fetched it takes user country and then pass to filter function to get all its state 
       vm.onCountryChange(vm.user.country.id) 
      }, function (errMsg) { 

      }); 
    } 
    init(); 
} 
})(); 

ここonCountryChange()私がデータをフェッチするために、並列に2つのサービスを呼び出すことができます最適化するため、それがユーザーの国IDを取得する前であっても、それ以前にロードするようで、リクエストが完了してユーザオブジェクトが設定されると、onCountryChange(countryId)をトリガして、ユーザが所属する国のすべての州を取得できます。

2つのhttpリクエストを並列にすると便利ですか?

すべてのリクエストが完了してから2番目の機能を呼び出す方法を確認するにはどうすればよいですか?

答えて

2

ここでは次の2つのオプション(両方とも動作します)があります。

オプション1:あなたはgetUserDetails

のロジックを変更する必要はありません、 myService .getCountryDetails.thengetUserDetailsを呼び出している約束チェーンを構築します

オプション2:平行して、この方法は、あなたがPromise.all(p1, p2).thenで代わりのでvm.onCountryChange(vm.user.country.id)を呼び出すことができ、あなたのgetCountryDetailsgetUserDetailsを向けるだろう使用Promise.allmyService.getUserDetails(paramData).then

関連する問題