programing

angularjs 약속을 돌려주기 전에 해결할 수 있나요?

copysource 2023. 3. 26. 14:20
반응형

angularjs 약속을 돌려주기 전에 해결할 수 있나요?

약속을 반환하는 함수를 작성하려고 합니다.그러나 요청한 정보를 즉시 이용할 수 있는 경우가 있습니다.소비자가 결정할 필요가 없도록 약속으로 포장하고 싶습니다.

function getSomething(id) {
    if (Cache[id]) {
        var deferred = $q.defer();
        deferred.resolve(Cache[id]); // <-- Can I do this?
        return deferred.promise;
    } else {
        return $http.get('/someUrl', {id:id});
    }
}

그리고 이렇게 사용하세요.

somethingService.getSomething(5).then(function(thing) {
    alert(thing);
});

문제는 콜백이 사전 해결된 약속에 대해 실행되지 않는다는 것입니다.이게 정당한 일인가요?이 상황에 대처할 수 있는 더 좋은 방법이 있을까요?

간단한 답변: 예, Angular를 해결할 수 있습니다.반환하기 전에 JS가 약속하면 예상대로 동작합니다.

JB Nizet의 Plunkr를 사용하지만, 리팩터링되어 원래 요구된 내용(즉, 서비스 호출)과 실제 온사이트에서 기능합니다.

서비스 내에서는...

function getSomething(id) {
    // There will always be a promise so always declare it.
    var deferred = $q.defer();
    if (Cache[id]) {
        // Resolve the deferred $q object before returning the promise
        deferred.resolve(Cache[id]); 
        return deferred.promise;
    } 
    // else- not in cache 
    $http.get('/someUrl', {id:id}).success(function(data){
        // Store your data or what ever.... 
        // Then resolve
        deferred.resolve(data);               
    }).error(function(data, status, headers, config) {
        deferred.reject("Error: request returned status " + status); 
    });
    return deferred.promise;
    
}

컨트롤러 내부...

somethingService.getSomething(5).then(    
    function(thing) {     // On success
        alert(thing);
    },
    function(message) {   // On failure
        alert(message);
    }
);

Angular 1.x에서 사전 해결된 약속을 간단히 반환하는 방법

해결 약속:

return $q.when( someValue );    // angular 1.2+
return $q.resolve( someValue ); // angular 1.4+, alias to `when` to match ES6

거절된 약속:

return $q.reject( someValue );

어레이 또는 오브젝트에 실제로 데이터를 캐시하고 싶은 경우 보통 다음과 같이 합니다.

app.factory('DataService', function($q, $http) {
  var cache = {};
  var service= {       
    getData: function(id, callback) {
      var deffered = $q.defer();
      if (cache[id]) {         
        deffered.resolve(cache[id])
      } else {            
        $http.get('data.json').then(function(res) {
          cache[id] = res.data;              
          deffered.resolve(cache[id])
        })
      }
      return deffered.promise.then(callback)
    }
  }

  return service

})

DEMO

캐시 요소를 초기화하지 않았습니다.

function getSomething(id) {
    if (Cache[id]) {
        var deferred = $q.defer();
        deferred.resolve(Cache[id]); // <-- Can I do this?
        return deferred.promise;
    } else {
        Cache[id] = $http.get('/someUrl', {id:id});
        return Cache[id];
    }
}

저는 제 리소스에서 데이터를 얻기 위해 공장을 이용하고 싶습니다.

.factory("SweetFactory", [ "$http", "$q", "$resource", function( $http, $q, $resource ) {
    return $resource("/sweet/app", {}, {
        "put": {
            method: "PUT",
            isArray: false
        },"get": {
            method: "GET",
            isArray: false
        }
    });
}]);

그럼 여기서 내 모델을 이렇게 서비스에서 노출시키세요.

 .service("SweetService",  [ "$q", "$filter",  "$log", "SweetFactory",
    function ($q, $filter, $log, SweetFactory) {

        var service = this;

        //Object that may be exposed by a controller if desired update using get and put methods provided
        service.stuff={
            //all kinds of stuff
        };

        service.listOfStuff = [
            {value:"", text:"Please Select"},
            {value:"stuff", text:"stuff"}];

        service.getStuff = function () {

            var deferred = $q.defer();

          var promise = SweetFactory.get().$promise.then(
                function (response) {
                    if (response.response.result.code !== "COOL_BABY") {
                        deferred.reject(response);
                    } else {
                        deferred.resolve(response);
                        console.log("stuff is got", service.alerts);
                        return deferred.promise;
                    }

                }
            ).catch(
                function (error) {
                    deferred.reject(error);
                    console.log("failed to get stuff");
                }
            );

            promise.then(function(response){
                //...do some stuff to sett your stuff maybe fancy it up
                service.stuff.formattedStuff = $filter('stuffFormatter')(service.stuff);

            });


            return service.stuff;
        };


        service.putStuff = function () {
            console.log("putting stuff eh", service.stuff);

            //maybe do stuff to your stuff

            AlertsFactory.put(service.stuff).$promise.then(function (response) {
                console.log("yep yep", response.response.code);
                service.getStuff();
            }).catch(function (errorData) {
                alert("Failed to update stuff" + errorData.response.code);
            });

        };

    }]);

그런 다음 컨트롤러가 이를 포함시켜 공개하거나 주입된 서비스를 참조하는 것만으로 상황에 맞는 작업을 수행할 수 있습니다.신경쓰지 말아요.

잘 되는 것 같아.하지만 나는 앵글에 익숙하지 않다.*오류 처리의 대부분은 명확성을 위해 생략되어 있습니다.

언급URL : https://stackoverflow.com/questions/20555472/can-you-resolve-an-angularjs-promise-before-you-return-it

반응형