AngularJS 中使用 $http.get()，如何处理错误？-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，$http 服务是用于与后端服务器进行数据交互的核心服务之一。其中，$http.get() 方法是用于从服务器获取数据的常用方法之一。在使用 $http.get() 时，我们难免会遇到一些错误或异常情况，比如请求失败、网络不可用等等。本文将讨论在 AngularJS 中使用 $http.get() 方法时，如何处理错误。

错误处理方式

在 AngularJS 中，通常有以下两种处理 $http.get() 方法返回的错误的方式：

方式一：使用 error 回调函数

在 $http.get() 方法中，可以使用 then() 方法处理成功和失败的情况，如下所示：

// javascriptcn.com 代码示例
$http.get('/api/data').then(successCallback, errorCallback);

function successCallback(response) {
  console.log(response.data);
}

function errorCallback(response) {
  console.log('Error:', response.status, response.statusText);
}

在这个例子中，我们可以看到，$http.get() 方法接收两个回调函数作为参数：第一个是在请求成功时执行的回调函数（successCallback），第二个是在请求失败时执行的回调函数（errorCallback）。如果请求成功，AnguarJS 将会传递一个包含响应数据的对象作为该回调函数的参数；如果请求失败，那么它会传递一个包含错误信息的对象。

使用该方式时，我们可以根据错误对象中的信息来进行错误处理，比如在控制台打印出错误信息、在页面上显示错误信息等等。

方式二：使用 $q.reject()

除了使用 error 回调函数外，还可以使用 $q.reject() 方法来处理错误，如下所示：

// javascriptcn.com 代码示例
$http.get('/api/data').then(successCallback)
                     .catch(errorCallback);

function successCallback(response) {
  console.log(response.data);
  return response.data;
}

function errorCallback(response) {
  console.log('Error:', response.status, response.statusText);
  return $q.reject(response.statusText);
}

使用该方式时，当请求成功时将会执行 successCallback 函数，而在请求失败时将会执行 errorCallback 函数。这里的 $q.reject() 方法用于返回一个带有拒绝原因的 Promise 对象，使得我们可以在后续流程中处理该 Promise 对象。

示例

下面是一个关于在 AngularJS 中使用 $http.get() 方法时如何处理错误的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp', [])
  .controller('myCtrl', function($http, $q) {
    var vm = this;
    vm.data = '';

    $http.get('/api/data')
      .then(function(response) {
        vm.data = response.data;
        console.log(vm.data);
        return response.data;
      })
      .catch(function(response) {
        console.log('Error:', response.status, response.statusText);
        alert('Error: ' + response.statusText);
        return $q.reject(response.statusText);
      });
  });

在上面的示例中，我们首先使用 $http.get() 方法来获取后端 API 的数据，并将获取到的数据绑定到控制器中的一个数据模型中。接着，我们使用 then() 方法处理请求成功的情况，并在控制台打印出获取到的数据。最后，我们使用 catch() 方法处理请求失败的情况，并使用 alert() 方法在页面上显示错误信息。如果请求失败，我们使用 $q.reject() 方法返回一个带有拒绝原因的 Promise 对象。

总结

在 AngularJS 中使用 $http.get() 方法获取后端数据时，我们难免会遇到一些错误或异常情况。为了更好地处理这些情况，我们一般使用 error 回调函数或 $q.reject() 方法来处理异常情况。该文对这两种方式进行了详细的介绍，并提供了示例代码，帮助读者更加深入地理解如何在 AngularJS 中处理错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540d7807d4982a6eba69209