当前位置: 首页 > 面试题库 >

如何将错误呈现给客户端?AngularJS / WebApi模型状态

姬昀
2023-03-14
问题内容

我正在使用WebApi为后端构建AngularJS
SPA应用程序。我在服务器上使用属性进行模型验证,如果验证失败,这就是我从ModelState返回的内容。

     {"Message":"The request is invalid.","ModelState":{"model.LastName":["Last Name must be at least 2 characters long."]}}

然后如何使用AngularJS将其呈现给客户端?

      //Save User Info
    $scope.processDriverForm = function(isValid) {
        if (isValid) {
            //set button disabled, icon, text
            $scope.locked = true;
            $scope.icon = 'fa fa-spinner fa-spin';
            $scope.buttonText = 'Saving...';
            $scope.submitted = true;
            $scope.formData.birthDate = $scope.formData.birthMonth + '/' + $scope.formData.birthDay + '/' + $scope.formData.birthYear;
            $http({
                    method: 'POST',
                    url: 'api/Account/Register',
                    data: $.param($scope.formData),
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
                })
                .success(function (data) {
                    console.log(data);
                    toastr.success('User ' + $scope.formData.username + ' created!');
                    $scope.userForm.$setPristine();
                    $scope.formData = {};
                    //reset the button
                    $scope.locked = false;
                    $scope.icon = '';
                    $scope.buttonText = 'Save';
                    //reset validation submitted
                    $scope.submitted = false;
                })
                .error(function (data, response) {
                    console.log(data);
                    toastr.error('Ooops! There was an error creating the user. Try again and if the problem persists, contact Support.');
                    //reset the button
                    $scope.locked = false;
                    $scope.icon = '';
                    $scope.buttonText = 'Save';
                    $scope.submitted = false;

                    var resp = {};

                    var errors = [];
                    for (var key in resp.ModelState) {
                        for (var i = 0; i < resp.ModelState[key].length; i++) {
                            errors.push(resp.ModelState[key][i]);
                        }
                    }
                    $scope.errors = errors;

                });

        }
        else {
            toastr.warning('Invalid User Form, correct errors and try again.');
        }
    };

问题答案:

呼叫服务器时,请根据对$http诺言的拒绝捕获错误。

然后在您的控制器中,我建议在处理显示的错误时将对错误数组的响应展平,如下面的小提琴示例所示:

for (var key in resp.ModelState) {
    for (var i = 0; i < resp.ModelState[key].length; i++) {
        errors.push(resp.ModelState[key][i]);
    }
}

放在一起:

// Post the data to the web api/service
$http.post(url, data)
    .success(successHandler)
    .error(function (response) {
        // when there's an error, parse the error
        // and set it to the scope (for binding)
        $scope.errors = parseErrors(response);
    });

//separate method for parsing errors into a single flat array
function parseErrors(response) {
    var errors = [];
    for (var key in response.ModelState) {
        for (var i = 0; i < response.ModelState[key].length; i++) {
            errors.push(response.ModelState[key][i]);
        }
    }
    return errors;
}


 类似资料:
  • null 然后如何用AngularJS将其呈现给客户机?

  • 我希望当遇到错误时,用户会收到对其http调用的异常响应。该错误确实被捕获并显示在spring日志中,但不会返回给用户。为什么? 我的方法是: 日志中的错误: 错误处理程序: xception.java 例外回复。JAVA 用户收到403。。我不知道为什么,但我应该接受我的错误,没有任何身体。。 InternalServerExc0019在try/catch之外工作。.

  • 直截了当的问题,希望有一个直截了当的答案。我试图使用request通过Node.js实现客户端凭证流。这是我的代码 无论我做什么,响应体总是 我尝试过使用 curl 提出请求,结果相同。 这意味着这是凭据的问题。我肯定为我的应用程序使用了正确的客户端ID和客户端秘密,这让我相信是编码导致了问题。 我的编码正确吗?如果是这样,还有什么原因呢?

  • 问题内容: 到现在为止,我主要是利用,,用于构建Web应用程序技术堆栈。关键是,提到的堆栈使用服务器端模式。Web浏览器的主要作用仅限于请求/响应周期(+客户端验证)。数据检索,业务逻辑,接线和验证是服务器端的主要职责。 我对 AngularJS 框架有几个疑问,这些疑问是由我阅读过以下引号引起的: 从 AngularJS教程中 : 对于Angular应用,我们鼓励使用Model-View-Con

  • 关于AngularJS框架,我有几个问题是从我读到的以下引用中得到启发的: 从AngularJS教程: 对于有角度的应用程序,我们鼓励使用Model-View-Controller(MVC)设计模式来解耦代码并分离关注点。 我知道我的问题有些奇怪,但我认为原因是,我对传统的服务器端MVC模式有些敏感。我确信有人已经做了同样的转变。

  • 这是我的模板: 这是我的视图模板: 我得到的内容是html,我想在视图中显示,但我得到的只是原始html代码。如何呈现HTML?