Angular 将 $http 注入配置或提供程序注入运行

服务器

Angular 是一种流行的前端开发框架，它提供了许多功能强大的工具和库，使开发人员能够构建高度交互和响应式的 Web 应用程序。其中一个核心功能是通过注入来配置和使用不同的服务和提供程序。

在 Angular 中，$http 是一个非常重要的服务，用于进行网络请求和与后端服务器进行通信。为了使用 $http 服务，我们需要先将它注入到我们的应用程序中。在配置阶段，我们可以使用 $httpProvider 来配置 $http 服务的默认参数。这样，我们可以在整个应用程序中使用这些默认参数，而不必在每个请求中进行重复设置。

下面是一个例子，展示了如何将 $http 注入到我们的应用程序中，并配置默认参数：

Javascript
angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.defaults.headers.common['Authorization'] = 'Bearer myToken';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/JSon';
  })
  .controller('myController', function($http) {
    $http.get('https://api.example.com/data')
      .then(function(response) {
        // 处理成功的响应
      })
      .catch(function(error) {
        // 处理错误的响应
      });
  });

在上面的示例中，我们首先定义了一个名为 "myApp" 的 Angular 模块，并将其依赖项设置为空数组。然后，我们使用 config 方法来配置 $http 服务的默认参数。在这个例子中，我们设置了一个名为 "Authorization" 的请求头，用于进行身份验证。我们还设置了一个名为 "Content-Type" 的请求头，指定请求的数据类型为 JSON。

接下来，我们定义了一个名为 "myController" 的控制器，并将 $http 服务注入到其中。在这个控制器中，我们使用 $http.get 方法发起一个 GET 请求到指定的 URL。然后，我们使用 then 方法来处理成功的响应，使用 catch 方法来处理错误的响应。

配置 $http 服务的默认参数

在上面的例子中，我们使用 $httpProvider 来配置 $http 服务的默认参数。这对于需要在整个应用程序中使用相同参数的请求非常有用。我们可以通过设置 $httpProvider.defaults 对象的属性来配置不同的默认参数。

例如，我们可以设置请求的超时时间：

Javascript
$httpProvider.defaults.timeout = 5000;

这样，如果请求在 5 秒内没有得到响应，就会自动被取消。

我们还可以设置全局的请求拦截器，用于在每个请求之前或之后执行一些额外的逻辑。这可以通过设置 $httpProvider.interceptors 数组来实现：

Javascript
$httpProvider.interceptors.push(function() {
  return {
    request: function(config) {
      // 在请求发送之前执行逻辑
      return config;
    },
    response: function(response) {
      // 在响应返回之后执行逻辑
      return response;
    }
  };
});

使用 $http 发起请求

在前面的例子中，我们使用了 $http.get 方法来发起一个 GET 请求。除了 GET 请求外，$http 服务还提供了其他常用的方法，如 POST、PUT、DELETE 等。

以下是一些常用的 $http 方法：

- $http.get(url, config)：发送一个 GET 请求

- $http.post(url, data, config)：发送一个 POST 请求

- $http.put(url, data, config)：发送一个 PUT 请求

- $http.delete(url, config)：发送一个 DELETE 请求

这些方法都返回一个 Promise 对象，我们可以使用 then 方法来处理成功的响应，使用 catch 方法来处理错误的响应。

处理响应

当我们收到一个成功的响应时，我们可以通过 response.data 属性来访问服务器返回的数据。例如：

Javascript
$http.get('https://api.example.com/data')
  .then(function(response) {
    console.log(response.data);
  });

当我们收到一个错误的响应时，我们可以通过 error.data 属性来访问服务器返回的错误信息。例如：

Javascript
$http.get('https://api.example.com/data')
  .catch(function(error) {
    console.error(error.data);
  });

在这篇文章中，我们学习了如何在 Angular 中使用 $http 服务来发起网络请求和与后端服务器进行通信。我们还了解了如何通过注入和配置 $http 来设置默认的请求参数，并且展示了一些常用的 $http 方法和如何处理响应。通过这些知识，我们可以更好地利用 Angular 来构建功能强大的 Web 应用程序。