Angularjs 如何对 $http 调用进行正确的错误处理？答案

【问题标题】：Angularjs how to do proper error handling for $http call?Angularjs 如何对 $http 调用进行正确的错误处理？
【发布时间】：2021-09-09 00:25:04
【问题描述】：

我的控制器变空或 undefined 数据从服务传回，这反过来又导致控制器出现错误，因为无法处理 undefined 结果。我正在重新阅读有关错误处理的材料，并且开始怀疑我的错误处理是否不完整。由于我的控制器正在获取响应，但响应为空/未定义，因此这意味着我的服务仍在传回错误响应....但基于我的服务，我认为应该使用 catch 处理它。如何解决此问题，以便我的服务处理错误并仅将正确的数据传回控制器？

控制器：

.controller('listCtrl', function($scope,listService) {

listService.getList(1)
.then(function(res) {
  if (res.list!= null) {   // <--- `Exception: Cannot read property 'list' of undefined`
     ...
     ...
  } else {
     ...
     ...
  }
}) ;

服务：

.factory("listService", function($http,$q) {
  // errMgmt 5100

  var headers={} ;
  var listMain = [] ;  // Current Lists
  var listPast = [] ;  // Past Lists


  function setVars() {
    baseUrl = "https://api.mydomain.com/v1/index.php" ;
    headers = {
      'Pragma':'no-cache', 
      'Expires': -1, 
      'Cache-Control':'no-cache,no-store,must-revalidate', 
      'Content-Type' : 'application/json',        
      'X-Requested-With':'com.mydomain',
      Authorization: 'Token ' +clientToken
    } ;
  }
      

  function getList(typeID) {
    if (typeID == 1) {
      listMain = [] ;
    } else if (typeID == 2) {
      listPast = [] ;
    }
    setVars() ;
    var dataObj = [{"type":typeID,"userID":userData.user_ID}] ;
    var req = {
      method: 'POST',
      url: baseUrl,
      timeout:httpTimeout,
      headers: headers,
      data: JSON.stringify(dataObj)
    }
     return $http(req)
    .then(function(response){
      if (typeID == 1) {
        listMain = response.data[0] ;  <-- Error happening, but being processed in success
        return listMain ;
      } else if (typeID == 2) {
        listPast = response.data[0] ;
        return listPast ;        
      }
    }).catch(function(err) {
      var msg = setError(err) ;
      errMgmt("services/getList",5100,msg) ;
    });
  }

  return {
    getList: function(typeID) {  // typeID : 1=current lsit, 2=past list
      return getList(typeID) ;
    }
 })

我已经阅读了各种各样的内容，但引起我注意的是我的服务可能需要定义为：

return $http(req) {
.then(function(success) {   
   // success response
},function(error1) {
   // error response
}).catch(error2) {
   // catch all
}) ;

如果是这种情况，那么 function(error1) 与 .catch(error2) 之间究竟有什么区别 - 每个过程具体是什么？

【问题讨论】：

标签： angularjs asynchronous ionic-framework error-handling callback

【解决方案1】：

尝试使用 success() 和 error() 调用 $http

.factory("listService", function($http,$q) {
  // errMgmt 5100

  var headers={} ;
  var listMain = [] ;  // Current Lists
  var listPast = [] ;  // Past Lists


  function setVars() {
    baseUrl = "https://api.mydomain.com/v1/index.php" ;
    headers = {
      'Pragma':'no-cache', 
      'Expires': -1, 
      'Cache-Control':'no-cache,no-store,must-revalidate', 
      'Content-Type' : 'application/json',        
      'X-Requested-With':'com.mydomain',
      Authorization: 'Token ' +clientToken
    } ;
  }
      

  function getList(typeID) 
  {
    if (typeID == 1) {
      listMain = [] ;
    } else if (typeID == 2) {
      listPast = [] ;
    }
    setVars() ;
    var dataObj = [{"type":typeID,"userID":userData.user_ID}] ;
    var req = {
      method: 'POST',
      url: baseUrl,
      timeout:httpTimeout,
      headers: headers,
      data: JSON.stringify(dataObj)
    }

    $http(req).success(function(data, status) 
    {
    if (status == 200) 
    {
      alert(data);
      if (typeID == 1) {
        listMain = data ;  
        return listMain ;
      } else if (typeID == 2) {
        listPast = data;
        return listPast ;        
      }       
      
    }
    }).error(function(data) 
    {
      alert(data);
    });   
  }

  return {
    getList: function(typeID) {  // typeID : 1=current lsit, 2=past list
      return getList(typeID) ;
    }
 })

【讨论】：