如何在AngularJS 1.2中获取HTTP响应状态代码

Question

在AngularJS 1.2rc（x）中使用ngResource，如何获取状态代码？

RestAPI.save({resource}, {data}, function( response, responseHeaders ) {
});

其中RestAPI是我的ngResource。

响应具有$promise对象和从服务器返回的资源，但不再是状态。如果服务器将状态代码注入到头对象中，responseHeaders()函数只有状态，而不是真正返回的状态代码。因此，有些服务器可能会提供服务，而有些服务器可能无法服务。

8 个答案:

答案 0 :(得分：13)

您可以在then来电后使用promiss回调catch，finally和$resource。

例如。如果你想在通话后发现错误，你可以这样做：

RestAPI.save({resource}, {data}, callbackFunction).$promise.catch(function(response) {
    //this will be fired upon error
    if(response.status == 500) alert('Something baaad happend');
}).then(function() {
    //this will be fired upon success
});

response对象将具有status和statusText属性。 status是整数状态代码，statusText是文本。您还将拥有包含服务器响应的data属性。

编辑：根据建议，它是response.status

答案 1 :(得分：12)

您必须在资源声明中添加拦截器。像这样：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

用法：

resource.get(params, function(result) {
    console.log(result.$status)
});

默认情况下应提供IMO状态代码。 这个https://github.com/angular/angular.js/issues/8341

存在问题

答案 2 :(得分：4)

对于使用较新版本Angular的任何人，看起来我们已经可以访问状态代码作为transformResponse函数since angular 1.3的第3个参数，但在Date::Parse::str2time函数中从未正确记录{3}}文档。

答案 3 :(得分：3)

我同意responseHeaders()函数只返回响应标题，但您可以自定义它，无论如何它都很有用。

1

解决你的问题。使用以下内容：（$$service是我的$ resource实例。）

var serve = new $$service();
serve.id = "hello_wrongPath"; // wrong path,will return 404
serve.$get()
    .then(function (data) {
        console.log("~~~hi~~~");
        console.log(data);
        return data;
    })
    .catch(function (error) {
        console.log("~~~error~~~");
        console.log(error);
        console.log(error.status); // --> 404
        console.log(error.statusText); // --> "Not Found"
        console.log(error.config.timeout); // --> 5000
        console.log(error.config.method); // --> GET
        console.log(error.config.url); // --> request url
        console.log(error.headers("content-type"));// --> "text/plain"
        return error.$promise;
    })
    .finally(function(data){
        console.log("~~~finally~~~");
        console.log(data); // --> undefined
    });

这样，你只能在ERROR响应中捕获status,statusText,timeout,method,headers(same with responseHeaders)。

2

如果你想在成功响应中看到响应细节，我使用了这样的拦截器：

ng.module("baseInterceptor", [])
    .factory("baseInterceptor", ["$q", function ($q) {
        return {
            'request': function (config) {
                console.info(config);
                //set timeout for all request
                config.timeout = 5000;
                return config;
            },
            'requestError': function (rejection) {
                console.info(rejection);
                return $q.reject(rejection);
            },
            'response': function (response) {
                console.log("~~interceptor response success~~");
                console.log(response);
                console.log(response.status);
                console.log(response.config.url);
                return response;
            },
            'responseError': function (rejection) {
                console.log("~~interceptor response error~~");
                console.log(rejection);
                console.log(rejection.status);
                return $q.reject(rejection);
            }
        };
    }]);

然后将拦截器添加到模块：

.config(["$httpProvider", function ($httpProvider) {
    $httpProvider.interceptors.push("baseInterceptor");
}])

答案 4 :(得分：3)

您可以获得如下响应状态：

＆＃13;

＆＃13;

$http.get(url).then(function(response){
  console.log(response.status); //successful status like OK
}, function(response){
  console.log(response.status); //error status like 400-Bad Request
})

＆＃13;

＆＃13;

＆＃13;

答案 5 :(得分：0)

我认为正确的答案是Bardiel和Ara的答案的结合。

在资源声明中添加拦截器之后。像这样：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

使用如下：

RestAPI.save()
.query(function(response) {
    // This will return status code from API like 200, 201 etc
    console.log(response.$status);
})
.$promise.catch(function(response) {
    // This will return status code from server side like 404, 500 etc
    console.log(response.status);
});

答案 6 :(得分：0)

我正在使用AngularJS v1.5.6，我这样做（在我的例子中，我将“getData”方法放在服务中）：

function getData(url) {
    return $q(function (resolve, reject) {
        $http.get(url).then(success, error);

        function success(response) {
            resolve(response);
        }
        function error(err) {
            reject(err);
        }
    });
}

然后在控制器中（例如），像这样调用：

function sendGetRequest() {
    var promise = service.getData("someUrlGetService");
    promise.then(function(response) {
        //do something with the response data
        console.log(response.data);
    }, function(response) {
        //do something with the error
        console.log('Error status: ' + response.status);
    });
}

正如文档所述，响应对象具有以下属性：

  

  
• data - {string | Object} - 使用转换函数转换的响应体。
  
• status - {number} - 响应的HTTP状态代码。
  
• headers - {function（[headerName]）} - Header getter function。
  
• config - {Object} - 用于生成请求的配置对象。
  
• statusText - {string} - 响应的HTTP状态文本。
  

请参阅https://docs.angularjs.org/api/ng/service/$http

希望它有所帮助！

答案 7 :(得分：-1)

我遇到了类似的问题。我查看了角度lib并添加了几行以在响应中返回状态。在此文件中，找到返回promise的位置。

替换以

开头的代码块

  

var promise = $ http（httpConfig）.then（function（response）

以下

var promise = $http(httpConfig).then(function(response) {
            var data = response.data,
                promise = value.$promise;

            if (data) {
              // Need to convert action.isArray to boolean in case it is undefined
              // jshint -W018
              if ( angular.isArray(data) !== (!!action.isArray) ) {
                throw $resourceMinErr('badcfg', 'Error in resource configuration. Expected ' +
                  'response to contain an {0} but got an {1}',
                  action.isArray?'array':'object', angular.isArray(data)?'array':'object');
              }
              // jshint +W018
              if (action.isArray) {
                value.length = 0;
                forEach(data, function(item) {
                  value.push(new Resource(item));
                });
              } else {
                copy(data, value);
                value.$promise = promise;
              }
            }

            value.status = response.status;
            value.$resolved = true;

            response.resource = value;

            return response;
          }, function(response) {
            value.status = response.status;
            value.$resolved = true;

            (error||noop)(response);

            return $q.reject(response);
          });

或者您可以添加此行

value.status = response.status;

然后在代码中访问状态，如reponse.status.Though，这是一种破解，但对我有用。我还必须在缩小版本中进行更改。

Answer 1

您可以在then来电后使用promiss回调catch，finally和$resource。

例如。如果你想在通话后发现错误，你可以这样做：

RestAPI.save({resource}, {data}, callbackFunction).$promise.catch(function(response) {
    //this will be fired upon error
    if(response.status == 500) alert('Something baaad happend');
}).then(function() {
    //this will be fired upon success
});

response对象将具有status和statusText属性。 status是整数状态代码，statusText是文本。您还将拥有包含服务器响应的data属性。

编辑：根据建议，它是response.status

Answer 2

您必须在资源声明中添加拦截器。像这样：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

用法：

resource.get(params, function(result) {
    console.log(result.$status)
});

默认情况下应提供IMO状态代码。 这个https://github.com/angular/angular.js/issues/8341

存在问题

Answer 3

对于使用较新版本Angular的任何人，看起来我们已经可以访问状态代码作为transformResponse函数since angular 1.3的第3个参数，但在Date::Parse::str2time函数中从未正确记录{3}}文档。

Answer 4

我同意responseHeaders()函数只返回响应标题，但您可以自定义它，无论如何它都很有用。

1

解决你的问题。使用以下内容：（$$service是我的$ resource实例。）

var serve = new $$service();
serve.id = "hello_wrongPath"; // wrong path,will return 404
serve.$get()
    .then(function (data) {
        console.log("~~~hi~~~");
        console.log(data);
        return data;
    })
    .catch(function (error) {
        console.log("~~~error~~~");
        console.log(error);
        console.log(error.status); // --> 404
        console.log(error.statusText); // --> "Not Found"
        console.log(error.config.timeout); // --> 5000
        console.log(error.config.method); // --> GET
        console.log(error.config.url); // --> request url
        console.log(error.headers("content-type"));// --> "text/plain"
        return error.$promise;
    })
    .finally(function(data){
        console.log("~~~finally~~~");
        console.log(data); // --> undefined
    });

这样，你只能在ERROR响应中捕获status,statusText,timeout,method,headers(same with responseHeaders)。

2

如果你想在成功响应中看到响应细节，我使用了这样的拦截器：

ng.module("baseInterceptor", [])
    .factory("baseInterceptor", ["$q", function ($q) {
        return {
            'request': function (config) {
                console.info(config);
                //set timeout for all request
                config.timeout = 5000;
                return config;
            },
            'requestError': function (rejection) {
                console.info(rejection);
                return $q.reject(rejection);
            },
            'response': function (response) {
                console.log("~~interceptor response success~~");
                console.log(response);
                console.log(response.status);
                console.log(response.config.url);
                return response;
            },
            'responseError': function (rejection) {
                console.log("~~interceptor response error~~");
                console.log(rejection);
                console.log(rejection.status);
                return $q.reject(rejection);
            }
        };
    }]);

然后将拦截器添加到模块：

.config(["$httpProvider", function ($httpProvider) {
    $httpProvider.interceptors.push("baseInterceptor");
}])

Answer 5

您可以获得如下响应状态：

＆＃13;

＆＃13;

$http.get(url).then(function(response){
  console.log(response.status); //successful status like OK
}, function(response){
  console.log(response.status); //error status like 400-Bad Request
})

＆＃13;

＆＃13;

＆＃13;

Answer 6

我认为正确的答案是Bardiel和Ara的答案的结合。

在资源声明中添加拦截器之后。像这样：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

使用如下：

RestAPI.save()
.query(function(response) {
    // This will return status code from API like 200, 201 etc
    console.log(response.$status);
})
.$promise.catch(function(response) {
    // This will return status code from server side like 404, 500 etc
    console.log(response.status);
});

Answer 7

我正在使用AngularJS v1.5.6，我这样做（在我的例子中，我将“getData”方法放在服务中）：

function getData(url) {
    return $q(function (resolve, reject) {
        $http.get(url).then(success, error);

        function success(response) {
            resolve(response);
        }
        function error(err) {
            reject(err);
        }
    });
}

然后在控制器中（例如），像这样调用：

function sendGetRequest() {
    var promise = service.getData("someUrlGetService");
    promise.then(function(response) {
        //do something with the response data
        console.log(response.data);
    }, function(response) {
        //do something with the error
        console.log('Error status: ' + response.status);
    });
}

正如文档所述，响应对象具有以下属性：

  

  
• data - {string | Object} - 使用转换函数转换的响应体。
  
• status - {number} - 响应的HTTP状态代码。
  
• headers - {function（[headerName]）} - Header getter function。
  
• config - {Object} - 用于生成请求的配置对象。
  
• statusText - {string} - 响应的HTTP状态文本。
  

请参阅https://docs.angularjs.org/api/ng/service/$http

希望它有所帮助！

Answer 8

我遇到了类似的问题。我查看了角度lib并添加了几行以在响应中返回状态。在此文件中，找到返回promise的位置。

替换以

开头的代码块

  

var promise = $ http（httpConfig）.then（function（response）

以下

var promise = $http(httpConfig).then(function(response) {
            var data = response.data,
                promise = value.$promise;

            if (data) {
              // Need to convert action.isArray to boolean in case it is undefined
              // jshint -W018
              if ( angular.isArray(data) !== (!!action.isArray) ) {
                throw $resourceMinErr('badcfg', 'Error in resource configuration. Expected ' +
                  'response to contain an {0} but got an {1}',
                  action.isArray?'array':'object', angular.isArray(data)?'array':'object');
              }
              // jshint +W018
              if (action.isArray) {
                value.length = 0;
                forEach(data, function(item) {
                  value.push(new Resource(item));
                });
              } else {
                copy(data, value);
                value.$promise = promise;
              }
            }

            value.status = response.status;
            value.$resolved = true;

            response.resource = value;

            return response;
          }, function(response) {
            value.status = response.status;
            value.$resolved = true;

            (error||noop)(response);

            return $q.reject(response);
          });

或者您可以添加此行

value.status = response.status;

然后在代码中访问状态，如reponse.status.Though，这是一种破解，但对我有用。我还必须在缩小版本中进行更改。