$http 服务
angular 内置的 $http 服务简单的封装了浏览器原生的 XMLHttpRequest 对象, 可以直接同外部进行通信.
$http 服务只能接受一个参数, 且该参数是一个对象, 这个对象主要包含一些 http 请求的配置内容. 如:
- var req = {
- method: 'POST',
- url: 'http: //example.com',
- headers: {'Content - Type': 'application / x - www - form - urlencoded'},
- data: {
- test: 'test'
- }
- }
- $http(req).success(function(data, header, config, status) {
- // 响应成功
- }).error(function(data, header, config, status) {
- // 处理响应失败
- });
可以看到 $http() 方法返回的是一个 promise 对象, 我们也可以在响应返回时用 then 回调. 但是用 then 回调会得到一个特殊的参数, 代表了相应对象的成功或失败信息, 还可以接受两个可选的函数作为参数. 如:
- $http(req).then(function(resp){
- //resp 是一个响应对象
- },function(resp){
- // 带有错误信息的 resp
- });
then() 方法回调和 success(),error() 回调的区别是, then() 会接收到完整的对象, 而 success() 和 error() 会对响应进行解构.
ng 中的 $http 方法
- $http
- $http.get
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
$http() 的用法
一些参数和说明
参数 | 说明 |
---|---|
method | 请求方法 |
url | 请求地址 |
params | 字符串或者对象,将使用 paramserializer 序列化并且作为 GET 请求的参数。 |
data | 字符串或者对象,作为请求信息数据的数据。 |
headers | 对象,字符串或者函数返回表示发送到服务器的 HTTP 请求头。如果函数的返回值为空,则 headers 则不发送。 |
xsrfHeaderName | 填充 XSRF 令牌的 HTTP 请求头名称 |
xsrfCookieName | 含有 XSRF 令牌 cookie 的名字 |
transformRequest | 函数 / 函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取 http 请求体和请求头,并且返回他们的转换后的数据(通常是序列化)。 |
transformResponse | 函数 / 函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取 http 响应体和响应头,并且返回他们的转换数据(通常是序列化)。 |
paramSerializer | 字符串或者返回字符串的函数。用于编写请求参数(指定为对象)的字符串表示形式的函数。如果指令是字符串,那么将被解释为通过 $injector 注册的函数,这意味着你能通过注册服务方式创建你自己的序列化程序。默认的序列化是 $httpParamSerializer;或者你可以使用 $httpParamSerializerJQLike。 |
cache | 如果为 true,一个默认的 < span class="MathJax_Preview" ow="364" oh="51">缓存将被作为请求的缓存,否则如果存在一个用 cacheFactory 创建的缓存实例,则将用于缓存。 |
timeout | 数值,毫秒,超时则让请求中止。 |
withCredentials | boolean,是否设置 withcredentials flag 的 XHR 对象。查看更多信息的凭据。 |
responseType | 响应头类型 |
返回的参数:
参数 | 说明 |
---|---|
data | 字符串或对象。变换函数变换后的响应体。 |
status | 响应的 http 状态码。 |
headers | 函数,响应头的 getter 函数。 |
config | 对象,用于生成请求的配置对象。 |
statusText | 字符串,响应的 HTTP 状态文本。 |
$http.get(url,[config]) $http.delete(url,[donfig]) $http.head(url,[config]) $http.jsonp(url,[config])
这四个方法中的参数:
url: 请求地址.
config: 请求配置对象.
$http.post(url,data,[config]) $http.put(url,data,[config]) $http.patch(url,data,[config])
这三个方法多上面四个多了一个参数 data, 表示请求内容.
以上就是 $http 服务的内容.
$http 的测试
angular 的 $http 服务比较简单, 这里再介绍一下 $http 服务的测试.
举一个简单的例子:
- var app = angular.module('Application', []);
- app.controller('MainCtrl', function($scope, $http) {
- $http.get('Users/users.json').success(function(data){
- $scope.users = data;
- });
- $scope.text = 'Hello World!';
- });
我们主要用 angular 自带的 $httpBackend 设置伪后台, 试的时候, 我们不需要真实的发送 HTTP 请求来获取数据. 如果可以只测试 Service 的逻辑, 当发送请求时, 我们将这个请求拦截下来, 然后返回一个预定义好的数据即可.
- describe('MainCtrl',
- function() {
- // 我们会在测试中使用这个 scope
- var scope, $httpBackend;
- // 模拟我们的 Application 模块并注入我们自己的依赖
- beforeEach(angular.mock.module('Application'));
- // 模拟 Controller, 并且包含 $rootScope 和 $controller
- beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_) {
- // 设置 $httpBackend 冲刷 $http 请求
- $httpBackend = _$httpBackend_;
- $httpBackend.when('GET', 'Users / users.json').respond([{
- id: 1,
- name: 'Bob'
- },
- {
- id: 2,
- name: 'Jane'
- }]);
- // 创建一个空的 scope
- scope = $rootScope.$new();
- // 声明 Controller 并且注入已创建的空的 scope
- $controller('MainCtrl', {
- $scope: scope
- });
- }));
- // 测试从这里开始
- it('should have variable text ="Hello World!"',
- function() {
- expect(scope.text).toBe('Hello World !');
- });
- it('should fetch list of users',
- function() {
- $httpBackend.flush();
- expect(scope.users.length).toBe(2);
- expect(scope.users[0].name).toBe('Bob');
- // 输出结果以方便查看
- for (var i = 0; i < scope.users.length; i++) {
- console.log(scope.users[i].name);
- }
- });
- });
$httpBackend 的常用方法:
方法 | 说明 |
---|---|
when(method, url, [data], [headers]) | 测试 $http() |
whenGET(url, [headers]); | 测试 $http.get() |
同理, 还有 whenHead(),whenDelete() 等等.
来源: http://www.bubuko.com/infodetail-2558739.html