Angular 处理来自 Web Api 的返回数据作为错误

Question

我正在使用 Angular 调用 ASP.NET Web API 端点，该端点接受包含客户记录的文件并将它们导入数据库。导入工作正常，但我无法弄清楚如何向用户显示导入结果。我想列出每条导入的记录并显示它是否成功。

+----------+-----------+---------------+
| LastName | FirstName | Import-Status |
+----------+-----------+---------------+
|   Smith  | Tom       | Success       |
+----------+-----------+---------------+
|  Manning | Pam       | Failure       |
+----------+-----------+---------------+
| Jenkins  | Alan      | Success       |
+----------+-----------+---------------+
| Zip      | George    | Failure       |
+----------+-----------+---------------+

为此，我从 Web Api 返回了一组结果..

...
List<ImportResults> results = ProcessCustomerFile.ReadFile(uploadedFileName);
return Request.CreateResponse<IEnumerable<ImportResult>>(HttpStatusCode.OK, results);

这是处理返回的 Angular 函数

$scope.uploadFiles = function () {

    uploadService.uploadFiles($scope)
        // then() called when uploadFiles gets back
        .then(function (data) {
            // promise fulfilled
            if (data.length === 0) {
                alert("File Uploaded and Processed")
                $scope.formdata = new FormData();
                $scope.data = [];
                $scope.$apply;
            } else {
                // There is data being returned so assign to the $scope variable
                alert("File Uploaded and Processed with returned data");
                $scope.resultsCollection;
                $scope.$apply;
                alert(data);
            }
        }, function (error) {
            //Server Error
            $scope.uploading = false;
            alert("Function error " + error);
        }

        );
};

我遇到的问题是 AngularJS 代码似乎将返回的数据视为错误。我正在导入四个记录，因此由于消息中有四个对象，它看起来是我想要的数据。我只是不确定为什么function (error) {} 会处理它。

更新：添加 uploadService 的代码

.factory('uploadService', function ( $http, $q) {
        return {
            uploadFiles: function ($scope) {

                var request = {
                    method: 'POST',
                    url: 'http://localhost:4321/api/customerupload',
                    data: $scope.formdata ,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                return $http(request)
                    .then(
                    function (response) {
                        if (typeof response.data === 'string') {
                            return response.data;
                        } else {
                            return $q.reject(response.data);
                        }
                    },
                    function (response) {
                        return $q.reject(response.data);
                    }
                    );
            }

        };
    })

Answer 1

Angular 没有将其作为错误处理。只是您给出的输入参数名称是“错误”。指的是实际数据。

为了得到一些了解；

在uploadService返回块（在发送文件中）而不是.then尝试使用.success和.error

 .factory('uploadService', function ( $http, $q) {
        return {
            uploadFiles: function ($scope) {

                var request = {
                    method: 'POST',
                    url: 'http://localhost:4321/api/customerupload',
                    data: $scope.formdata ,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                return $http(request)
                    .success(function (response) {
                        if (typeof response.data === 'string') {
                            return response.data;
                        } else {
                            return $q.reject(response.data);
                        }
                    })
                    .error(function (error) {
                        return $q.reject(error);
                    });
            }

        };
    })

在调用服务的角度函数中

    $scope.uploadFiles = function () {

    uploadService.uploadFiles($scope)
        // then() called when uploadFiles gets back
        .success(function (data) {
            // promise fulfilled
            if (data.length === 0) {
                alert("File Uploaded and Processed")
                $scope.formdata = new FormData();
                $scope.data = [];
                $scope.$apply;
            } else {
                // There is data being returned so assign to the $scope variable
                alert("File Uploaded and Processed with returned data");
                $scope.resultsCollection;
                $scope.$apply;
                alert(data);
            }
        })
        .error (function (error) {
            //Server Error
            $scope.uploading = false;
            alert("Function error " + error);
        });
};