Javascript AngularJS拦截器响应错误响应未定义

我构建了这个处理程序来处理$http请求

看起来是这样的：

.service('ApiHandler', ['$q', '$http', '$injector', 'apiUrl', 'ErrorService', 'toastr', function ($q, $http, $injector, apiUrl, errorService, toastr) {

    // Private function to build our request
    var buildRequest = function (url, method, data, params) {

        // Create our deferred promise
        var deferred = $q.defer();

        // Create the model
        var model = {
            method: method,
            url: apiUrl + url,
            data: data,
            params: params
        };

        console.log(model);

        // Build our request
        $http(model).then(function (response) {

            console.log('we have a response');

            // Resolve our response
            deferred.resolve(response.data || response);

        // If we have an error
        }, function (error) {

            console.log('we have an error');

            // Process our error
            processedError = errorService.process(error);

            // Display our error
            toastr.error(processedError.message, processedError.title);
        });

        // Return our promise
        return deferred.promise;
    };

    // GET
    this.get = function (url, params) {
        return buildRequest(url, 'GET', null, params);
    };

    // POST
    this.post = function (url, data) {
        return buildRequest(url, 'POST', data);
    };

    // PUT
    this.put = function (url, data) {
        return buildRequest(url, 'PUT', data);
    };

    // DELETE
    this.delete = function (url, data) {
        return buildRequest(url, 'DELETE', data);
    };
}])

.factory('AuthInterceptorService', ['$location', function ($location) {

    // The request function
    var request = function (config) {

        // Get our stored auth data
        var authData = angular.fromJson(sessionStorage.authorizationData);

        // Set our headers to the request headers or a new object
        config.headers = config.headers || {};

        // If we have any auth data
        if (authData) {

            // Set our authorization header
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        // Return our config
        return config;
    };

    // The response function
    var responseError = function (response) {

        console.log('error handler');

        // If our response status is unauthorized
        if (response.status === 401) {

            // Redirect to the login screen
            $location.path('/security/login');
        }
    };

    return {
        request: request,
        responseError: responseError
    };
}])

其思想是，当某人执行任何http请求时，如果请求成功，它将显示数据（仅显示数据），如果它因任何原因出错，它将处理错误并显示一条漂亮的错误消息

这是工作，但我不确定为什么它已经停止。 我故意在API中输入一个错误，以强制执行500内部服务器错误，在chrome中我可以看到：

获取500（内部服务器错误）

问题是，在我得到这个错误后，我希望看到控制台中出现错误，但我没有。我得到了我们得到了回应

有人知道为什么命中的是成功处理程序而不是错误处理程序吗

更新

我现在知道是什么导致了这个问题。 我有一个截取器，看起来像这样：

.service('ApiHandler', ['$q', '$http', '$injector', 'apiUrl', 'ErrorService', 'toastr', function ($q, $http, $injector, apiUrl, errorService, toastr) {

    // Private function to build our request
    var buildRequest = function (url, method, data, params) {

        // Create our deferred promise
        var deferred = $q.defer();

        // Create the model
        var model = {
            method: method,
            url: apiUrl + url,
            data: data,
            params: params
        };

        console.log(model);

        // Build our request
        $http(model).then(function (response) {

            console.log('we have a response');

            // Resolve our response
            deferred.resolve(response.data || response);

        // If we have an error
        }, function (error) {

            console.log('we have an error');

            // Process our error
            processedError = errorService.process(error);

            // Display our error
            toastr.error(processedError.message, processedError.title);
        });

        // Return our promise
        return deferred.promise;
    };

    // GET
    this.get = function (url, params) {
        return buildRequest(url, 'GET', null, params);
    };

    // POST
    this.post = function (url, data) {
        return buildRequest(url, 'POST', data);
    };

    // PUT
    this.put = function (url, data) {
        return buildRequest(url, 'PUT', data);
    };

    // DELETE
    this.delete = function (url, data) {
        return buildRequest(url, 'DELETE', data);
    };
}])

.factory('AuthInterceptorService', ['$location', function ($location) {

    // The request function
    var request = function (config) {

        // Get our stored auth data
        var authData = angular.fromJson(sessionStorage.authorizationData);

        // Set our headers to the request headers or a new object
        config.headers = config.headers || {};

        // If we have any auth data
        if (authData) {

            // Set our authorization header
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        // Return our config
        return config;
    };

    // The response function
    var responseError = function (response) {

        console.log('error handler');

        // If our response status is unauthorized
        if (response.status === 401) {

            // Redirect to the login screen
            $location.path('/security/login');
        }
    };

    return {
        request: request,
        responseError: responseError
    };
}])

正如您所知，responseError函数没有返回/拒绝任何内容，因此我将其更改为：

.factory('AuthInterceptorService', ['$q', '$location', 'ErrorService', function ($q, $location, errorService) {

    // The request function
    var request = function (config) {

        // Get our stored auth data
        var authData = angular.fromJson(sessionStorage.authorizationData);

        // Set our headers to the request headers or a new object
        config.headers = config.headers || {};

        // If we have any auth data
        if (authData) {

            // Set our authorization header
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        // Return our config
        return config;
    };

    // The response function
    var responseError = function (response) {

        console.log('error handler');

        // If our response status is unauthorized
        if (response.status === 401) {

            // Redirect to the login screen
            $location.path('/security/login');
        } else {

            // Process our error
            var error = errorService.process(response);

            console.log(error);

            // Reject our response
            return $q.reject(error);
        }
    };

    return {
        request: request,
        responseError: responseError
    };
}])

我将API处理程序更改为：

.service('ApiHandler', ['$q', '$http', 'apiUrl', 'toastr', function ($q, $http, apiUrl, toastr) {

    // Private function to build our request
    var buildRequest = function (url, method, data, params) {

        // Create our deferred promise
        var deferred = $q.defer();

        // Create the model
        var model = {
            method: method,
            url: apiUrl + url,
            data: data,
            params: params
        };

        //console.log(model);

        // Build our request
        $http(model).success(function (response) {

            //console.log('we have a response');

            // Resolve our response
            deferred.resolve(response);

        // If we have an error
        }).error(function (error) {

            console.log('we have an error');

            console.log(error);

            // Display our error
            toastr.error(error.message, error.title);

            deferred.reject();
        });

        // Return our promise
        return deferred.promise;
    };

    // GET
    this.get = function (url, params) {
        return buildRequest(url, 'GET', null, params);
    };

    // POST
    this.post = function (url, data) {
        return buildRequest(url, 'POST', data);
    };

    // PUT
    this.put = function (url, data) {
        return buildRequest(url, 'PUT', data);
    };

    // DELETE
    this.delete = function (url, data) {
        return buildRequest(url, 'DELETE', data);
    };
}])

---

现在实际调用了错误处理程序，但错误参数未定义。有人知道为什么吗？

你能试着这样做吗：

$http.get('/someURL').success(function(data, status, header, config) {
    // success handler
}).error(function(data, status, header, config) {
    // error handler
});

---

如果我将ApiHandler更改回此：

.service('ApiHandler', ['$q', '$http', 'apiUrl', 'toastr', function ($q, $http, apiUrl, toastr) {

    // Private function to build our request
    var buildRequest = function (url, method, data, params) {

        // Create our deferred promise
        var deferred = $q.defer();

        // Create the model
        var model = {
            method: method,
            url: apiUrl + url,
            data: data,
            params: params
        };

        // Build our request
        $http(model).then(function (response) {

            // Resolve our response
            deferred.resolve(response.data);

        // If we have an error
        }, function (response) {

            // Display our error
            toastr.error(response.message, response.title);

            deferred.reject();
        });

        // Return our promise
        return deferred.promise;
    };

    // GET
    this.get = function (url, params) {
        return buildRequest(url, 'GET', null, params);
    };

    // POST
    this.post = function (url, data) {
        return buildRequest(url, 'POST', data);
    };

    // PUT
    this.put = function (url, data) {
        return buildRequest(url, 'PUT', data);
    };

    // DELETE
    this.delete = function (url, data) {
        return buildRequest(url, 'DELETE', data);
    };
}])

它很好用

我也可以做一个

.success(function (response) {

    return response;
}).catch(function (response) {

    toastr.error(response.message, response.title);
});

---

这也行。

如果我这样做，出现错误时不会调用成功处理程序，但错误处理程序也不会。我不知道为什么：/