AngularJS中如何優雅地處理錯誤

在AngularJS中，優雅地處理錯誤可以通過以下方法實現：

1. 使用 $exceptionHandler 服務：AngularJS 提供了一個內置的 $exceptionHandler 服務，用于捕獲整個應用程序中的未捕獲異常。你可以將自定義的錯誤處理邏輯注入到這個服務中，以便以一種統一的方式處理所有錯誤。

app.controller('MyController', function($scope, $exceptionHandler) {
  $scope.handleError = function(error) {
    // 自定義錯誤處理邏輯
    console.error('An error occurred:', error);
    
    // 調用 $exceptionHandler 服務以記錄錯誤
    $exceptionHandler(error);
  };
});

2. 使用路由錯誤處理：AngularJS 路由器允許你為不同的路由配置錯誤處理函數。這樣，當用戶導航到無法解析的路由時，你可以捕獲并處理錯誤。

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/page1', {
      templateUrl: 'page1.html',
      controller: 'Page1Controller'
    })
    .when('/page2', {
      templateUrl: 'page2.html',
      controller: 'Page2Controller'
    })
    .otherwise({
      redirectTo: '/page1',
      resolve: {
        error: function($rootScope, $location) {
          // 在這里處理錯誤，例如重定向到默認路由
          $rootScope.$broadcast('error', { message: 'An error occurred while navigating.' });
        }
      }
    });
}]);

app.run(['$rootScope', function($rootScope) {
  $rootScope.$on('error', function(event, data) {
    // 在這里處理路由錯誤
    console.error('Route error:', data.message);
  });
}]);

3. 使用服務捕獲異常：你可以在自定義服務中捕獲異常，并將它們傳遞給 $exceptionHandler 服務進行處理。

app.service('MyService', function($http, $exceptionHandler) {
  this.getData = function() {
    return $http.get('/api/data')
      .then(function(response) {
        // 處理成功的響應
        return response.data;
      })
      .catch(function(error) {
        // 捕獲異常并調用 $exceptionHandler 服務
        $exceptionHandler(error);
      });
  };
});

4. 使用 try-catch 語句：在控制器和服務的方法中，使用 try-catch 語句捕獲異常，并執行自定義的錯誤處理邏輯。

app.controller('MyController', function($scope, MyService) {
  $scope.getData = function() {
    try {
      MyService.getData().then(function(data) {
        $scope.data = data;
      });
    } catch (error) {
      $scope.handleError(error);
    }
  };
});

通過以上方法，你可以在 AngularJS 應用程序中優雅地處理錯誤，提高用戶體驗和應用程序的穩定性。