AngularJS 中的 $http 服务中的 config 属性用法详解-FunTeaLearn Online Web Tutorials

AngularJS 是一个流行的前端框架，经常被用于构建单页面应用（SPA）。在使用 AngularJS 进行前端开发时，开发人员通常会遇到需要发送后端请求的情况。这时，我们就会用到 AngularJS 内置的 $http 服务。

$http 服务用于发送 HTTP 请求。它具有众多配置选项，其中一个重要的选项是 config 属性。这篇文章将对 $http 服务中的 config 属性进行详细介绍和解释。

config 属性

config 属性是一个与请求相关的配置对象。它包含了我们想要发送请求时的各种参数。config 对象的结构如下：

// www.javascriptcn.com code example
{
  method: 'GET', // 请求方法
  url: '/api/users', // 请求 URL
  params: { // 查询参数
    firstname: 'John',
    lastname: 'Doe'
  },
  data: { // 请求的 payload
    id: 123,
    name: 'John'
  },
  headers: { // 请求头
    token: 'abc123',
    'Content-Type': 'application/json'
  },
  transformRequest: function(data, headersGetter) { // 请求发送前的数据转换函数
    return JSON.stringify(data);
  },
  transformResponse: function(data, headersGetter) { // 请求接收后的数据转换函数
    return JSON.parse(data);
  },
  timeout: 10000, // 超时时间（毫秒）
  cache: true, // 是否缓存响应
  responseType: 'json' // 响应类型
}

method

请求方法。它可以是以下任意一种：

GET
POST
PUT
DELETE
HEAD
OPTIONS
PATCH

url

请求 URL。可以是绝对 URL，也可以是相对 URL。如果是相对 URL，则会自动加上当前页面的 URL。

params

查询参数。一个对象，其中的属性会被拼接成查询字符串添加到 URL 后面。

{
  url: '/api/users',
  params: { firstname: 'John', lastname: 'Doe' }
}

上面的代码将会发送一个 GET 请求，URL 为 /api/users?firstname=John&lastname=Doe。

data

请求的 payload。一个对象，它会被转换成 JSON 字符串，然后作为请求体发送到服务器。

{
  url: '/api/users',
  method: 'POST',
  data: { name: 'John' }
}

上面的代码将会发送一个 POST 请求，URL 为 /api/users，请求体为 {"name":"John"}。

headers

请求头。一个对象，其中的属性代表请求头字段的名称，属性值代表字段的值。

{
  url: '/api/users',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer abc123'
  }
}

上面的代码将会发送一个 GET 请求，并在请求头中添加两个字段：Content-Type: application/json 和 Authorization: Bearer abc123。

transformRequest 和 transformResponse

transformRequest 和 transformResponse 都是函数类型的选项，它们分别用于修改请求发送前和请求接收后的数据。它们都需要返回一个修改后的数据。

// www.javascriptcn.com code example
{
  url: '/api/users',
  method: 'POST',
  data: { name: 'John' },
  transformRequest: function(data, headersGetter) {
    data.age = 25;
    return JSON.stringify(data);
  },
  transformResponse: function(data, headersGetter) {
    data = JSON.parse(data);
    data.age = data.age + 5;
    return data;
  }
}

上面的代码将会发送一个 POST 请求，URL 为 /api/users，请求体为 {"name":"John","age":25}。接收到响应后，它会将响应的数据转换成对象，并将其中的 age 属性加上 5。

timeout

超时时间。一个整数，以毫秒为单位。如果请求在指定时间内没有得到响应，则会被视为超时，并且会触发一个错误。

{
  url: '/api/users',
  timeout: 5000
}

上面的代码将会发送一个 GET 请求，并设置超时时间为 5 秒钟。

cache

是否缓存响应。一个布尔值。如果设置为 true，则响应会被缓存。

{
  url: '/api/users',
  cache: true
}

上面的代码将会发送一个 GET 请求，并将响应缓存起来。

responseType

响应类型。一个字符串。它可以是以下任意一种：

json
text
blob
arraybuffer

{
  url: '/api/users',
  responseType: 'json'
}

上面的代码将会发送一个 GET 请求，并要求响应的类型为 JSON。

示例代码

下面是一个示例代码，它演示了如何使用 $http 服务以及如何设置 config 属性。

// www.javascriptcn.com code example
angular.module('myApp', [])
  .controller('myCtrl', function($scope, $http) {
    $scope.getUser = function(id) {
      $http.get('/api/users/' + id, { cache: true }).then(function(response) {
        $scope.user = response.data;
      }, function(response) {
        alert('Failed to get user');
      });
    };
  });

上面的代码演示了如何在控制器中使用 $http.get 方法来获取用户信息。它还展示了如何设置 cache 属性来缓存响应。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67c110b6314edc2684878850

AngularJS 中的 $http 服务中的 config 属性用法详解