AngularJS : 비동기 호출 대기

Question

약속의 AngularJS 개념을 머리 속에 감쌀 수 없습니다. 당신이 볼 수 있듯이

var packingProvider = angular.module('packingProvider',[]); 

packingProvider.provider('packingProvider',function(){ 
    return{ 
     $get: function($http){ 
      return{ 
       getPackings: function(){ 
        $http.post('../sys/core/fetchPacking.php').then(function(promise){ 
         var packings = promise.data; 
         return packings; 
        }); 
       } 
      } 
     } 
    } 
}); 

, 이것은 내 주요 응용 프로그램에서 데이터를 수신하는 것을 사용하는 경우, 이제 객체

을 반환하는 방법 getPackings()을 제공 :

나는 공급자가 과정을 리팩토링없이 내가 이런 짓을 했을까 방법

var packings = packingProvider.getPackings(); 

console.log(packings); // undefined 

: 통화 내가 데이터를 '대기'해야 문제의 결과로, 비동기 될 것입니다 내 메인 컨트롤러에?

Answer 1

then 메소드의 반환 값은 생각할 때 반환되지 않습니다. 나중에 돌아오고있어.

var packings = packingProvider.getPackings(); 문에서는 $http에서 반환 된 약속이 비동기이기 때문에 반환 값이 정의되지 않습니다. 즉 $http.post에 대한 호출이 발생하면 은을 완료하지 않으며 함수가 반환됩니다. 아무것도 반환하지 않는 JS 함수에서는 undefined가 반환됩니다. post 호출이 나중에 완료되고 return packings;을 실행하면 아무데도 반환되지 않습니다.

getPackings 메서드는 아마도 $http.post에서 약속을 반환해야합니다. 그런 식으로이 메소드를 사용하고자하는 코드라면 promise에 직접 then을 호출하고 필요에 따라 값을 설정할 수 있습니다. 컨트롤러에서 그 약속을 $scope에 직접 할당하고보기에 사용할 수 있습니다. 여기에 그 특별한 기능을 설명하는 좋은 글이 있습니다 : http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/

덧붙여 말하자면, 당신은 거기에 장황한 서비스 선언이있는 것 같습니다. 어떤 이유로 그것을 단축하지 않는 어떤 이유?

var module = angular.module('packing', []); 

module.service('packing', function($http) { 
    return { 
    getPackings: function() { 
     return $http.post('../sys/core/fetchPacking.php'); 
    } 
    }; 
}); 

저는 AngularJS에 비교적 새로 도입되었지만, 모든 타이핑에서 어떤 이득도 얻지 못했습니다. (=

Answer 2

그런 다음

packingProvider.getPackings().then(function(packings){ 
    console.log(packings); 
}); 

주요 아이디어를

var packingProvider = angular.module('packingProvider',[]); 

packingProvider.provider('packingProvider',function(){ 
    return{ 
     $get: function($http){ 
      return{ 
       getPackings: function(){ 
        return $http.post('../sys/core/fetchPacking.php').then(function(response){ 
         return response.data; // packings 
        }); 
       } 
      } 
     } 
    } 
}); 

보십시오 : 당신이 getPackings 함수에서 약속 개체를 반환해야합니다. 동기 화를 호출 할 수 있는지 확실하지 않지만 그렇게하는 것이 바람직하지 않습니다.

$scope.packings = packingProvider.getPackings(); 

을 : 당신이 당신의 컨트롤러에 "포장"모델 객체를 만들고 두 방향 바인딩에 사용할 경우 데이터를 통해 온다 또한, 안전하게 각도 빨리 해결할 약속 개체를 할당 할 수 있습니다

UPDATE 1.2.0-rc.3 약속의 랩핑의로서는

가 (https://github.com/angular/angular.js/blob/master/CHANGELOG.md#120-rc3-ferocious-twitch-2013-10-14)되지 않는 한, 그래서 상기 코드 라인은 두 방향 더 결합 될 수 없습니다.

Answer 3

지연/약속을 jQuery와 함께 사용하는 방법을 보여주는 많은 자료가 있습니다.이 장애물을 극복하는 데 도움이되는 검색을 시도하십시오. Afaik, AngularJS 약속은 jQuery 약속과 동일합니다.

JQuery와 약속

는 다음과 같이 사용됩니다 : 그 jQuery를 아약스 호출 등과되는 .done, 일단 .success, 같은 기능을 가지고 있지만

var getPackings = function() { return $.get('../sys/core/fetchPacking.php'); }; 
var packings; 
$.when(getPackings()).then(function(data){ packings = data; console.log(packings) }); 

가 .. 즉 '일반 Deferreds을 대체 할 것이다 명심하십시오. when(). then() 함수.

위의 jQuery 메서드에서 데이터를 설정하고 .then() 함수에서 출력해야한다는 것을 알 수 있습니다. 비동기 프로세스가 다른 곳에서 수행되는 것을 보장 할 수 없기 때문입니다. 그 때는() 함수에서 처리를 계속 어떤 기능을 이상적으로 당신과 같이,로 부를 것이다 :

$.when(myAsyncFunc()).then(myAppCanContinue(dataReturnedByAsyncFunc)); 

각도가 동일한 논리를 따를 것입니다. 위의 내용을 이해한다면 Angular에서이 작업을 수행하는 방법을 이해하는 것이 더 쉬워야합니다. http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/이

,이 같은 것을 할 필요가 작동하도록 코드를 얻기 위해 :

packingProvider.provider('packingProvider',function(){ 
    return{ 
     $get: function($http){ 
      return{ 
       getPackings: function(){ 
        return $http.post('../sys/core/fetchPacking.php'); 
       } 
      } 
     } 
    } 
}); 
var packings = packingProvider.getPackings(); 

packings.then(function(data) { console.log(data)});