Skip to main content
 首页 » 编程设计

c#之Angular 处理从 Web Api 返回数据作为错误

2024年02月05日33落叶

我正在使用 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); 
                    } 
                    ); 
            } 
 
        }; 
    }) 

请您参考如下方法:

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

为了得到一些理解;

在 uploadService 返回 block 中(在发送文件中)而不是 .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); 
                    }); 
            } 
 
        }; 
    }) 

在调用服务的 Angular 函数中

    $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); 
        }); 
};