컨트롤러에이 약속을 다시하려면 어떻게해야합니까?

Question

그래서 Amazon S3 버킷에 이미지를 업로드하는 서비스에서 정의한 일련의 기능이 있습니다. console.log를 사용하여 서비스 자체에서 경고하고 모든 것이 올바르게 돌아옵니다.

그러나 이제 컨트롤러에 약속을 되 돌리며 업로드가 완료되었음을 사용자에게 알릴 수 있습니다. 나는 내가 어떻게 그것을 할 것인지 잘 모르겠다. 나는 filereader.onload에 반환을 두는 것을 시도했다, 그러나 나는 나가 후에 돌려 보낸 것이 약속 및 그런 것이 아니다는 것을 말하는 과실을 얻는다. 여기에 내 코드입니다 :

angular.module("testApp", []) 
.controller("testCtrl", function($scope, amazonService) { 
    $scope.test = "leeroy jenkins"; 

    $scope.upload = function() { 
     amazonService.uploadImage($('#file')); 
    } 
}) 
.service("amazonService", function($http) { 
    var url = "/api/" 
    var uploadImageFilestream = function(obj) { 
     return $http({ 
      method: "PUT", 
      url: url + "media/images", 
      data: obj 
     }).then(function(res) { 
      if (res.status === 200) { 
       alert("upload successful!"); 
      } 
      return res; 
     }); 
    } 

    var formatFileName = function(filename, newBase) { 
     //first, get the file extension 
     var extension = filename.substring(filename.lastIndexOf(".")); 
     return newBase + extension; 
    } 

    this.uploadImage = function(obj) { 
     var file = obj[0].files[0]; 
     var fileReader = new FileReader(); 

     fileReader.onload = function(loaded) { 
      uploadImageFilestream({fileName: formatFileName(file.name, "test1"), fileBody: loaded.target.result}); 
     } 

     fileReader.readAsDataURL(file); 
    } 
}) 

나는 내가 uploadImage 기능으로 uploadImageFilestream 기능을 결합하면 작동 것을 알지만, 별도의 함수의 약속을 구조하는 방법을 모르겠어요.

Answer 1

사용 $q :

당신은 이연 개체를 만들고 약속을 반환 AngularJS와의 $ q를 서비스를 사용한다

.service("amazonService", function($http, $q) { 
    var url = "/api/" 
    var uploadImageFilestream = function(obj) { 
     return $http({ 
      method: "PUT", 
      url: url + "media/images", 
      data: obj 
     }); 
    } 

    var formatFileName = function(filename, newBase) { 
     //first, get the file extension 
     var extension = filename.substring(filename.lastIndexOf(".")); 
     return newBase + extension; 
    } 

    this.uploadImage = function(obj) { 
     var file = obj[0].files[0]; 
     var fileReader = new FileReader(); 

     var deferer = $q.defer(); 

     fileReader.onload = function(loaded) { 
      uploadImageFilestream({fileName: formatFileName(file.name, "test1"), fileBody: loaded.target.result}) 
      .then(function(res) { 
       if (res.status === 200) { 
        deferer.resolve(); 
        alert("upload successful!"); 
       } 
       return res; 
      }); 
     } 

     fileReader.readAsDataURL(file); 

     return deferer.promise; 
    } 
}) 

Answer 2

. 약속을 사용하는 방법을 보여주기 위해 다음 코드를 수정했습니다.

angular.module("testApp", []) 
.controller("testCtrl", function($scope, amazonService) { 
    $scope.test = "leeroy jenkins"; 

    $scope.upload = function() { 
     var promise = amazonService.uploadImage($('#file')); // call to function returns promise 
     promise.then(function(){ // when promise is resolved, desired data is passed 
      alert("success"); 
     }).catch(function(error){ // when promise is rejected, related error object is passed 
      alert("failure"); 
     }); 
    } 
}) 
.service("amazonService", function($http, $q) { // added $q service to handle promises 
    var url = "/api/" 
    var uploadImageFilestream = function(obj) { 
     return $http({ 
      method: "PUT", 
      url: url + "media/images", 
      data: obj 
     }).then(function(res) { 
      if (res.status === 200) { 
       alert("upload successful!"); 
      } 
      return res; 
     }); 
    } 

    var formatFileName = function(filename, newBase) { 
     //first, get the file extension 
     var extension = filename.substring(filename.lastIndexOf(".")); 
     return newBase + extension; 
    } 

    this.uploadImage = function(obj) { 
     var file = obj[0].files[0]; 
     var fileReader = new FileReader(); 
     var deferredObject = $q.defer(); // added deferred object which will be used to return promise and resolve or reject is as shown below 
     fileReader.onload = function(loaded) { 
      uploadImageFilestream({fileName: formatFileName(file.name, "test1"), fileBody: loaded.target.result}).then(response){ 
       deferredObject.resolve(response); // when resolve function of deferred object is called success callback in controller will be called with the data you pass here 
      }).catch(function(errorObj){ 
       deferredObject.reject(errorObj); // when reject function of deferred object is called error callback is controller will be called with the error object you pass here 
      }); 
     } 

     fileReader.readAsDataURL(file); 
     return deferredObject.promise; // return promise object which will be resolve or reject and accordingly success callback and error callback will be called with then and catch respectively 
    } 
}); 

AngularJs Reference에 대한 링크. 참조를 통해 볼 수있는 약속을 만들고 반환하는 다른 방법이 있습니다.

하나 만들고 함수로 $ q를 개체를 사용하여 직접 콜백을 통과 참조에 주어진 약속을 반환하는 다른 방법으로 아래와 같이

// for the purpose of this example let's assume that variables `$q` and `okToGreet` 
// are available in the current lexical scope (they could have been injected or passed in). 
// for the purpose of this example let's assume that variables `$q` and `okToGreet` 
// are available in the current lexical scope (they could have been injected or passed in). 

function asyncGreet(name) { 
    // perform some asynchronous operation, resolve or reject the promise when appropriate. 
    return $q(function(resolve, reject) { 
    setTimeout(function() { 
     if (okToGreet(name)) { 
     resolve('Hello, ' + name + '!'); 
     } else { 
     reject('Greeting ' + name + ' is not allowed.'); 
     } 
    }, 1000); 
    }); 
} 

var promise = asyncGreet('Robin Hood'); 
promise.then(function(greeting) { 
    alert('Success: ' + greeting); 
}, function(reason) { 
    alert('Failed: ' + reason); 
});