在angular $ http服务中,我如何捕获错误的"状态"？

Question

我正在读一本名为"Pro Angular JS"的书.但是,我有一个关于如何捕获错误状态的问题.

我编码的是:

$http.get(dataUrl)
    .success(function (data){
        $scope.data.products = data;
    })
    .error(function (error){
        $scope.data.error=error;
        console.log($scope.data.error.status); // Undefined!
        // (This is the spot that I don't get it.)                                         
    });

如果我编码"console.log($ scope.data.error.status);" ,为什么console.log的参数未定义？

在书中,有句子,"传递给错误函数的对象定义了状态和消息属性."

所以我做了$ scope.data.error.status

为什么这是错的？

Answer 1

在$http传统方法的承诺success,并error已被弃用.请改用标准then方法.看看文档https://docs.angularjs.org/api/ng/service/ $ http

现在正确的使用方法是:

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

响应对象具有以下属性:

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

200到299之间的响应状态代码被视为成功状态,将导致调用成功回调.

Answer 2

您的参数不正确,错误不会返回包含状态和消息的对象,它会按照下面描述的顺序将它们作为单独的参数传递.

取自角度文档:

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

因此,您需要将代码更改为:

$http.get(dataUrl)
    .success(function (data){
        $scope.data.products = data;
    })
    .error(function (error, status){
        $scope.data.error = { message: error, status: status};
        console.log($scope.data.error.status); 
  }); 

显然,您不必创建表示错误的对象,您可以创建单独的范围属性,但同样的原则适用.

Answer 3

更新:从angularjs 1.5开始,promise方法成功和错误已被弃用.(见这个答案)

来自当前的文档:

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

您可以使用函数的其他参数,如下所示:

error(function(data, status, headers, config) {
    console.log(data);
    console.log(status);
}

请参阅$ http docs:

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Answer 4

因为$http.get使用额外的便利方法返回'promise' success并且error(只包含结果then)你应该能够使用(无论你的Angular版本如何):

$http.get('/someUrl')
    .then(function success(response) {
        console.log('succeeded', response); // supposed to have: data, status, headers, config, statusText
    }, function error(response) {
        console.log('failed', response); // supposed to have: data, status, headers, config, statusText
    })

问题的答案并不严格,但如果您被"我的Angular版本与文档不同"问题所困扰arguments,即使您不知道相应的方法签名,您也可以将其全部转储掉:

$http.get('/someUrl')
  .success(function(data, foo, bar) {
    console.log(arguments); // includes data, status, etc including unlisted ones if present
  })
  .error(function(baz, foo, bar, idontknow) {
    console.log(arguments); // includes data, status, etc including unlisted ones if present
  });

然后,根据您找到的任何内容,您可以"修复"要匹配的函数参数.

Answer 5

来自官方角度文档

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

正如您所看到的,错误回调的第一个参数是数据,状态是第二个.