在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返回一個帶有額外的便利方法“承諾” success和error （這只是包裝的結果， then ），你應該能夠使用（無論你的角度版本）：

$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 ，即使您不知道相應的方法簽名，也可以轉儲所有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.
  });

正如您所看到的，錯誤回調的第一個參數是數據，狀態是第二個。

Answer 6

響應狀態是回調中的第二個參數，（ 來自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.
  });