javascript - 如何处理 Controller 内部 Angular 服务的错误？

Question

我是 Angular 新手，我正在尝试从 Controller 内的服务访问错误消息

这是我的服务

 admin.service('fileUpload', ['$http', function ($http) {
        this.uploadFileToUrl = function(file, uploadUrl){
           var fd = new FormData();
           fd.append('file', file);

           $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
           })

           .success(function(response){
              console.log(response)
           })

           .error(function(response){
              console.log(response)
           });
        }
     }]);```

我的 Controller 内的上传功能如下所示

admin.controller('uploadCtrl', function($scope, fileUpload){


 $scope.uploadFile = function(){
           var file = $scope.myFile;
           var uploadUrl = "/upload-url/";
           fileUpload.uploadFileToUrl(file, uploadUrl)
        };

});

Answer 1

$http.post 返回一个 promise ，您可以从 uploadFileToUrl 函数返回该 promise 。然后，如果有人需要与结果交互，他们可以使用 Promise 对象。

服务:

admin.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
       var fd = new FormData();
       fd.append('file', file);

     //VVVVVV----------  added return statement
       return $http.post(uploadUrl, fd, {
          transformRequest: angular.identity,
          headers: {'Content-Type': undefined}
       })
    }])

Controller

admin.controller('uploadCtrl', function($scope, fileUpload){
    $scope.uploadFile = function(){
       var file = $scope.myFile;
       var uploadUrl = "/upload-url/";
       fileUpload.uploadFileToUrl(file, uploadUrl)
         //VVVVVV------------ added .then and callbacks
           .then(
              function (result) {
                 console.log('success!');
              },
              function (error) {
                 console.log('error :(');
              }
           )
    };
});