Angular 中的 $http 服务学习教程

在 Angular 中，$http 服务是一种用于进行 Web 请求的强大工具。它可以用来获取、提交和处理数据，使得前端开发变得更加容易和灵活。本文将介绍 Angular 中的 $http 服务，并提供详细的学习教程和示例代码。

$http 服务简介

在 Angular 中，$http 服务是一个可以发起 HTTP 请求的服务。它是 Angular 内置的一个服务，可以通过注入 $http 来使用。$http 提供了一系列方法来发送 HTTP 请求，包括 GET、POST、PUT、DELETE 等方法。同时，$http 也可以配置请求头、请求参数、响应类型等属性，以及处理请求和响应的拦截器。

$http 服务的使用

发送 GET 请求

发送 GET 请求最简单的方式是使用 $http.get() 方法。该方法接受一个 URL 参数，并返回一个 Promise 对象，该对象的 resolve 函数将在请求成功时被调用，reject 函数将在请求失败时被调用。

下面是一个发送 GET 请求的示例：

$http.get('/api/data').then(function(response) {
  console.log(response.data);
}, function(error) {
  console.log(error);
});

发送 POST 请求

发送 POST 请求需要使用 $http.post() 方法。该方法接受一个 URL 和一个数据对象作为参数，并返回一个 Promise 对象。

下面是一个发送 POST 请求的示例：

$http.post('/api/data', {name: 'John', age: 30}).then(function(response) {
  console.log(response.data);
}, function(error) {
  console.log(error);
});

配置请求头

可以使用 $http 方法的 config 参数来配置请求头。例如，可以在请求头中添加 Authorization 字段：

$http.get('/api/data', {
  headers: { 'Authorization': 'Bearer ' + token }
}).then(function(response) {
  console.log(response.data);
}, function(error) {
  console.log(error);
});

配置请求参数

可以使用 $http 方法的 params 参数来配置请求参数。例如，可以在请求中添加一个搜索关键字：

$http.get('/api/data', {
  params: { q: 'angular' }
}).then(function(response) {
  console.log(response.data);
}, function(error) {
  console.log(error);
});

配置响应类型

可以使用 $http 方法的 responseType 参数来配置响应类型。例如，可以请求一个二进制文件：

$http.get('/api/data', {
  responseType: 'arraybuffer'
}).then(function(response) {
  console.log(response.data);
}, function(error) {
  console.log(error);
});

响应拦截器

可以使用 $httpProvider.interceptors 属性来注册请求和响应的拦截器。例如，可以在请求和响应中添加一个 Loading 状态：

// javascriptcn.com 代码示例
$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.loading = true;
      return config;
    },
    response: function(response) {
      $rootScope.loading = false;
      return response;
    }
  };
});

总结

$htpp 服务是 Angular 中非常重要的一部分，它为前端开发提供了强大的 HTTP 请求工具。本文介绍了 $http 服务的基本用法，并提供了详细的示例代码。希望本文对你的学习和工作有所帮助。

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