AngularJS 中对 $http 的理解

在 AngularJS 中，$http 是一个非常重要的服务，它可以帮助我们与服务器进行数据交互。$http 的使用非常灵活，可以使用多种不同的请求方式，包括 GET、POST、PUT、DELETE 等，同时也支持对请求进行拦截、转换和缓存等操作。在本文中，我们将深入探讨 AngularJS 中 $http 的使用方法和原理，帮助读者更好地理解和应用这个重要的服务。

$http 的基本使用方法

在 AngularJS 中，使用 $http 发送请求非常简单，我们只需要在控制器中引入 $http 服务，然后调用相应的方法即可。例如，我们可以使用 $http.get() 方法发送一个 GET 请求，代码如下：

$http.get('/api/users').then(function(response) {
  // 处理响应数据
});

上述代码中，我们向服务器发送了一个 GET 请求，请求地址为 '/api/users'。当服务器返回响应数据时，我们可以在回调函数中对数据进行处理。$http.get() 方法返回的是一个 Promise 对象，因此我们可以使用 then() 方法来处理响应数据。

除了 $http.get() 方法外，$http 还提供了许多其他的方法，包括 $http.post()、$http.put()、$http.delete() 等。这些方法与 $http.get() 的使用方法类似，只需要传入相应的参数即可。

$http 的高级用法

除了基本的请求方法外，$http 还提供了许多高级的用法，包括请求拦截、响应拦截、请求转换、响应转换、缓存等。这些用法可以帮助我们更好地控制请求和响应的行为，提高应用的性能和可维护性。

请求拦截

在发送请求之前，我们可以使用请求拦截器对请求进行修改或者添加一些额外的参数。例如，我们可以在请求头中添加一个 Authorization 字段，用于验证用户的身份。代码如下：

$httpProvider.interceptors.push(function() {
  return {
    request: function(config) {
      config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
      return config;
    }
  };
});

上述代码中，我们使用 $httpProvider.interceptors.push() 方法向 $http 注册了一个请求拦截器。在请求拦截器中，我们可以修改请求的配置对象 config，例如添加请求头、修改请求参数等。最后，我们需要返回修改后的配置对象，以便 $http 继续发送请求。

响应拦截

在接收到响应之后，我们可以使用响应拦截器对响应进行修改或者处理一些额外的逻辑。例如，我们可以对响应进行错误处理，或者在响应中提取出我们需要的数据。代码如下：

$httpProvider.interceptors.push(function() {
  return {
    response: function(response) {
      if (response.status === 200) {
        // 处理响应数据
      } else {
        // 处理错误响应
      }
      return response;
    }
  };
});

上述代码中，我们向 $http 注册了一个响应拦截器，当接收到响应时，我们可以在拦截器中对响应进行处理。如果响应的状态码为 200，我们可以对响应数据进行处理；否则，我们可以对错误响应进行处理，并返回一个新的响应对象。

请求转换

在发送请求之前，我们可以使用请求转换器对请求数据进行转换，例如将 JSON 数据转换为表单数据、将 XML 数据转换为 JSON 数据等。代码如下：

$httpProvider.defaults.transformRequest.push(function(data) {
  if (angular.isObject(data) && String(data) !== '[object File]') {
    return $.param(data);
  } else {
    return data;
  }
});

上述代码中，我们向 $http 注册了一个请求转换器。在转换器中，我们可以对请求数据进行判断和转换，例如将对象类型的数据转换为表单数据。最后，我们需要返回转换后的数据，以便 $http 使用。

响应转换

在接收到响应之后，我们可以使用响应转换器对响应数据进行转换，例如将 XML 数据转换为 JSON 数据、将 JSON 数据转换为 HTML 数据等。代码如下：

$httpProvider.defaults.transformResponse.push(function(data, headersGetter) {
  if (typeof data === 'string' && headersGetter('Content-Type').indexOf('application/xml') === 0) {
    return xml2json(data);
  } else {
    return data;
  }
});

上述代码中，我们向 $http 注册了一个响应转换器。在转换器中，我们可以对响应数据进行判断和转换，例如将 XML 数据转换为 JSON 数据。最后，我们需要返回转换后的数据，以便 $http 返回给调用者。

缓存

在发送请求之前，我们可以使用缓存机制对请求进行缓存，避免重复发送请求。代码如下：

$http.get('/api/users', { cache: true }).then(function(response) {
  // 处理响应数据
});

上述代码中，我们向 $http.get() 方法传入了一个 cache 参数，将请求缓存起来。当下一次发送相同的请求时，$http 会直接返回上一次的缓存数据，而不是重新发送请求。

总结

在本文中，我们深入探讨了 AngularJS 中 $http 的使用方法和原理，包括基本的请求方法和高级的用法。$http 的灵活性和强大的功能，使得我们可以更好地控制请求和响应的行为，提高应用的性能和可维护性。希望本文能够帮助读者更好地理解和应用 $http 服务，为前端开发提供指导和帮助。

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