在哪里处理AngularJS后端错误

Posted 2021-03-27

在审查AngularJS应用程序时，我很惊讶我真的不知道如何在Controller级别处理数据库中的错误。

我们有三层结构controller - > service - > rest

Rest服务处理对后端数据库的调用并返回对中间层服务的承诺，在大多数情况下将其交给控制器

myController.js

myService.getdata().then(function (result) {
  $scope.data = result
})

myService.js

this,getdata = function () {
  return RestService.get('url/to/my/data')
}

RestService愉快地返回来自Back End API的错误（通过hapi / Boom），这些错误可以被myService或myController捕获。我正在努力的是在服务而不是控制器中构造错误处理程序。

我在Controller中的最佳尝试如下：

  .then(function (result) {
    $scope.data = result
    // do something with the data
  })
  .catch(function (error) {
    console.error('data could not be loaded')
  })
  .finally(function () {
    // tidy up here
  })

我宁愿将错误处理移到服务中，但我不确定控制器如何等待数据处理...

答案

我提出的最好的方法是处理服务中的错误并创建额外的承诺以发送回控制器：

this.getdata = function () {
  //returns the $q.resolve or $q.reject promises with customized data
  return RestService.get('url/to/my/data').then(function(response) {
    // format the data differently from response, etc.
    var _data = customProcessing(response.data);

    // you can even decide, on your own if there is an error
    // if(someCondition) { return $q.reject("Custom error"); }

    return $q.resolve(_data);
  }).catch(function(error) {
    // throw up a modal, etc.
    var _error = customProcessing(error);
    return $q.reject(_error);
  }).finally(function() {
    //to do
  });
}

此示例允许您的服务层充当中间件。它获取数据然后，在执行它自己的函数后，它将控制权返回给控制器：

myService.getdata().then(function (data) {
  $scope.data = data;
}).catch(function(error) {
  //optional catch clause. I use it to stop loading spinners
  //or to show error message below a form
});

这是一个有效的例子：https://plnkr.co/edit/35zx59yHUJ1Zrf5LWp3W?p=preview