如何使用 MVC 自定义页面错误管理处理 angularjs HTTP 错误?

abb*_*man 5 c# model-view-controller visual-studio angularjs

• 我需要通过重定向到我自己的自定义错误页面来管理未找到页面和服务器问题错误,因此我按照以下步骤完成了此操作,并且工作正常。

网页配置

<customErrors mode="On">  
<error statusCode="400" redirect="~/Error/Error400"/>  
<error statusCode="404" redirect="~/Errors/Error404" />  
<error statusCode="403" redirect="~/Error/Error403" />  
<error statusCode="500" redirect="~/Errors/Error500" />  
</customErrors>  
Run Code Online (Sandbox Code Playgroud)

• 所以现在当我需要angularjs http通过以下代码来获取404之类的错误时,其中传递了控制器中不可用的错误方法 (GetDetai)(实际是“GetDetails”)。

$http({  
        method: 'GET',  
        url: '/Admin/Dashboard/GetDetai',  
        headers: { "Content-Type": "application/json" }  
     }).then(function (result) {  
        console.log(result);  
        $scope.GetCustomer = result.data;  
        }, function (reason) {  
                console.log(reason);  
            if (reason.status == '404') {  
                console.log('Invalid Method/URL.');  
            }  
            else if (reason.status == '505') {  
                console.log('Internal server error.');  
            }  
        }); 
Run Code Online (Sandbox Code Playgroud)

• 然后它没有捕捉到错误函数中的 404 错误,它进入 then 函数并显示在下面

第一个控制台日志输出

{data: "
?
?
?<!DOCTYPE html>
?<html>
?<head>
?    <meta c…white;">Go Back To Home</a>
?</body>
?</html>
?
?", status: 200, config: {…}, statusText: "OK", headers: ƒ, …}
data: "
?
?
?<!DOCTYPE html>
?<html>
?<head>
?    <meta charset="utf-8" />
?    <title></title>
?    <style>
?        body {
?            display: inline-block;
?            background: #00AFF9 url(https://cbwconline.com/IMG/Codepen/Unplugged.png) center/cover no-repeat;
?            height: 100vh;
?            margin: 0;
?            color: white;
?        }
?
?        h1 {
?            margin: .8em 3rem;
?            font: 4em Roboto;
?        }
?
?        p {
?            display: inline-block;
?            margin: .2em 3rem;
?            font: 2em Roboto;
?        }
?    </style>
?</head>
?<body>
?    <h1>Whoops!</h1>
?    <p>Something went wrong</p><br /><br />
?    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
?    <a href="/Home/Index" style="color:white;">Go Back To Home</a>
?</body>
?</html>
?
?"
status: 200
headers: ƒ (name)
config: {method: "GET", transformRequest: Array(1), transformResponse: Array(1), jsonpCallbackParam: "callback", paramSerializer: ƒ, …}
statusText: "OK"
xhrStatus: "complete"
__proto__: Object
Run Code Online (Sandbox Code Playgroud)

• 但是,当我评论/删除那个 web.config 自定义错误代码时,这个angularjs http调用错误函数正常工作,得到预期的 404 错误。

那么如何在不依赖和不影响其他代码的情况下正确管理这两种错误?

小智 1

您的 HTTP 调用返回状态“200”,即“正常”,因此您看不到 HTTP 错误 处理检索到的数据时引发的错误:

$http({
  ... 
})
.then(
  function (result) {
    console.log(result);
    //Line below is not invoked as result.data != "Exception"
    if (result.data == "Exception") {
        ... 
    }
    else {
        ...
        //This assignes result.data to GetCustomer in scope 
        //and at late stage of processing retrieved data rose exception... 
        $scope.GetCustomer = result.data;
    }
  }, 
  function (reason) { //This code is not invoking as http.resultCode="200" ("OK")
    ...
  }
);
Run Code Online (Sandbox Code Playgroud)