javascript - Angular switch 语句根据响应代码执行不同的操作

Question

我有一个 Angular post 到 Node ，根据响应代码我想执行不同的任务。

在我的 Node 中，我有 res.send 以根据 Node 端的操作发回不同的响应代码。

我有一个小的 if else 语句，但它似乎只运行 200 响应代码，它不打印 400 或其他代码

我的代码

FirstModule.controller('LoginController', function($scope, $http) {
    $scope.formData = {};
    $scope.LoginForm = function() {
        var data = {
            LoginEmail: $scope.sometext.LoginEmail
        };
        $http({
            url: 'http://localhost:8080/back-end/controller',
            method: "POST",
            data: data,
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(response) {
            if (response.status === 200) $scope.sometext = "200 all good";
            else if (response.status === 400) $scope.sometext = "400 nope";
            else if (response.status === 404) $scope.sometext = "404";
            else if (response.status === 500) $scope.sometext = "500";
            else $scope.sometext = "no data";
        });
    }
});

Answer 1

处理错误代码的最佳方式是使用拦截器。

app.factory('appInterceptor', function($rootScope, $location, URL, $q) {
    var numLoadings = 0;
    return {
        request: function(config) {
            config.timeout = 15000;
            numLoadings++;
            $rootScope.loading = true;
            $rootScope.noScroll = true;
            return config || $q.when(config)
        },
        response: function(config) {
            if ((--numLoadings) === 0) {
                $rootScope.loading = false;
                $rootScope.noScroll = false;
            }
            return config || $q.when(response);
        },
        requestError: function(config) {
            $rootScope.loading = false;
            $rootScope.noScroll = false;
            return config;
        },
        responseError: function(config) {
            if (!(--numLoadings)) {
                $rootScope.loading = false;
                $rootScope.noScroll = false;
            }
            //based on status, set up your error dialog boxes or messages
            switch (config.status) {
                case 500, 501, 502, 503, 504:
                    $rootScope.servererror = URL.getURL().baseURL + 'partials/modals/server-error.html';
                    break;
                case 400:
                    $rootScope.errorModalMessage = "The request cannot be fulfilled due to bad syntax";
                    $rootScope.errorModalPath = URL.getURL().baseURL + 'partials/modals/error-log.html';
                    break;
                    //Unauthorised Access
                case 401:
                    window.open(URL.getURL().baseURL + 'login', "_self");
                    window.open($rootScope.loginPathUrl, "_self");
                    break;
                case 404:
                    $rootScope.errorModalMessage = "No Data found";
                    $rootScope.errorModalPath = URL.getURL().baseURL + 'partials/modals/error-log.html';
                    break;
                case -1:
                    $rootScope.errorModalPath = URL.getURL().baseURL + 'partials/modals/timeout.html';
                    break;
                default:
            }
            return $q.reject(config);
        }
    }
});

您还必须使用 $httpProvider

在您的配置中注入(inject)您的拦截器

app.config(function($stateProvider, $locationProvider, $httpProvider, $urlRouterProvider, URL) {
    $httpProvider.interceptors.push('appInterceptor');
});

出于全局错误处理、身份验证或任何类型的同步或异步请求预处理或响应后处理的目的，希望能够在将请求交给服务器和响应，然后再将它们移交给发起这些请求的应用程序代码。拦截器利用 promise API 来满足同步和异步预处理的需求。

更多详情:https://docs.angularjs.org/api/ng/service/ $http

您的代码无法正常工作，因为您正在检查成功中的其他错误代码。除了 200 成功之外的所有状态代码都在 catch 部分。

$http({
  url: 'http://localhost:8080/back-end/controller',
  method: "POST",
  data: data,
  headers: {
    'Content-Type': 'application/json'
  }
}).then(function(response) {
  if (response.status === 200) $scope.sometext = "200 all good";
}).catch(function(response) {
  if (response.status === 400) $scope.sometext = "400 nope";
  else if (response.status === 404) $scope.sometext = "404";
  else if (response.status === 500) $scope.sometext = "500";
  else $scope.sometext = "no data";
});