$http 요청에서 응답이 올 때까지 angularjs로 어떻게 기다려야 합니까?

$http 요청에서 응답이 올 때까지 angularjs로 어떻게 기다려야 합니까?

RESTful 서비스의 데이터를 여러 페이지에 걸쳐 사용하고 있습니다.그래서 나는 그것을 위해 각진 공장을 사용하고 있다.그래서 서버에서 데이터를 한 번 가져와야 했고, 정의된 서비스를 통해 데이터를 가져올 때마다 데이터를 가져와야 했습니다.글로벌 변수처럼요.다음은 샘플입니다.

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

myApp.factory('myService', function($http) {
    $http({method:"GET", url:"/my/url"}).success(function(result){
        return result;
    });
});

컨트롤러에서는 이 서비스를 다음과 같이 사용하고 있습니다.

function myFunction($scope, myService) {
    $scope.data = myService;
    console.log("data.name"+$scope.data.name);
}

제 요구대로라면 문제 없습니다.그런데 문제는 웹페이지에 새로고침하면 서비스가 다시 호출되어 서버를 요청한다는 것입니다."정의된 서비스"에 의존하는 다른 함수가 실행되면 "뭔가"가 정의되지 않은 것과 같은 오류가 발생합니다.따라서 서비스가 로드될 때까지 스크립트로 기다립니다.내가 어떻게 그럴 수 있을까?angularjs도 있나요?

언제 완료될지 모르는 비동기 작업에는 약속을 사용해야 합니다.약속은 "아직 완료되지 않았지만 미래에 예상되는 작업을 나타냅니다." (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise))

구현 예는 다음과 같습니다.

myApp.factory('myService', function($http) {

    var getData = function() {

        // Angular $http() and then() both return promises themselves 
        return $http({method:"GET", url:"/my/url"}).then(function(result){

            // What we return here is the data that will be accessible 
            // to us after the promise resolves
            return result.data;
        });
    };


    return { getData: getData };
});


function myFunction($scope, myService) {
    var myDataPromise = myService.getData();
    myDataPromise.then(function(result) {  

       // this is only run after getData() resolves
       $scope.data = result;
       console.log("data.name"+$scope.data.name);
    });
}

편집: Sujoys에 대해.myFuction() 호출이 .then() 함수의 실행이 종료될 때까지 돌아오지 않으려면 어떻게 해야 합니까?

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
         $scope.data = result; 
         console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
 }

getData() 호출을 완료하는 데 10초가 걸린다고 가정합니다.함수가 그 시간 동안 아무것도 반환하지 않으면 사실상 정상적인 동기 코드가 되어 완료될 때까지 브라우저를 정지시킵니다.

단, 약속이 즉시 반환되므로 브라우저는 그 사이에 다른 코드를 계속 사용할 수 있습니다.약속이 해결되거나 실패하면 then() 콜이 트리거됩니다.따라서 코드 흐름이 다소 복잡해지더라도 이 방법은 훨씬 더 타당합니다(복잡성은 결국 비동기/병렬 프로그래밍의 일반적인 문제임).

처음 접하는 사용자의 경우 다음과 같이 콜백을 사용할 수도 있습니다.

사용 중인 서비스:

.factory('DataHandler',function ($http){

   var GetRandomArtists = function(data, callback){
     $http.post(URL, data).success(function (response) {
         callback(response);
      });
   } 
})

컨트롤러 내:

    DataHandler.GetRandomArtists(3, function(response){
      $scope.data.random_artists = response;
   });

나는 같은 문제를 겪고 있었지만 이것이 나에게 효과가 있다면 아무 문제도 없었다.하지만 여기 효과가 있었던 것이 있습니다.

app.factory('myService', function($http) {
    var data = function (value) {
            return $http.get(value);
    }

    return { data: data }
});

그리고 그것을 사용하는 기능은...

vm.search = function(value) {

        var recieved_data = myService.data(value);

        recieved_data.then(
            function(fulfillment){
                vm.tags = fulfillment.data;
            }, function(){
                console.log("Server did not send tag data.");
        });
    };

서비스는 그렇게 필요하지 않지만 확장성에 대한 좋은 관행이라고 생각합니다.특히 API를 사용할 때 하나의 유언에 필요한 것은 대부분입니다.어쨌든 이게 도움이 됐으면 좋겠어요.

참고로, 이것은 Angularfire를 사용하고 있기 때문에 서비스나 다른 용도에 따라 다소 다를 수 있지만 $http와 같은 문제를 해결할 수 있습니다.같은 문제를 안고 있었습니다.최적의 솔루션은 모든 서비스/팩토리를 범위에서 하나의 약속으로 통합하는 것이었습니다.이러한 서비스/등을 로드할 필요가 있는 루트/뷰 마다, 컨트롤러 기능내에 로드된 데이터를 필요로 하는 함수, 즉 myfct()와 auth iput 후에 실행중의 메인 app.js를 넣습니다.

myservice.$loaded().then(function() {$rootScope.myservice = myservice;});

그리고 제가 방금 본 장면에서

ng-if="myservice" ng-init="somevar=myfunct()"

컨트롤러가 내부의 모든 것을 실행할 수 있도록 첫 번째/부모 뷰 요소/컨트롤러에서

myfunct()

비동기 약속/주문/실행 문제에 대해 걱정하지 않아도 됩니다.나는 그것이 나와 같은 문제를 가진 누군가에게 도움이 되기를 바란다.

언급URL : https://stackoverflow.com/questions/18421830/how-to-wait-till-the-response-comes-from-the-http-request-in-angularjs