2017-02-16

AngularJS权威指南-XHR

《AngularJS 权威教程》读书笔记，第十五章——同外界通信：XHR 和服务器通信。

简介

$http 服务简单的封装了浏览器原生的 XMLHttpRequest 对象。
如果响应码在 200-299 之间，会认为响应成功，success 回调会被调用，否则 error 回调会被调用。
如果响应结果是重定向，XMLHttpRequest 会跟进这个重定向，error 回调并不会被调用。
调用 http 方法后，在下一个 $digest 循环运行之前它并不会被真正执行，尽管可以这样强制执行 digest 循环：

$scope.$apply(function(){
    $http({
        method: 'GET',
        url: '/api/users.json'
    });
});

请求设置

params：请求参数可以是字符串map（会被当成查询字符串附加在 URL 后面）或者对象（会被 JSON 序列化）
xsrfHeaderName
xsrfCookieName
cache：布尔值（如果为 true，那么 AngularJS 会用默认的 $http 缓存来对 GET 请求进行缓存）或一个 $cacheFactory 对象的实例（会使用这个对象对 GET 请求进行缓存）
timeout：数值型（延迟请求的毫秒数）或一个 promise 对象（当该 promise 对象被 resolve 时请求会被中止）
withCredentials：布尔型，若为 true，那么 XHR 请求对象中会设置 withCredentials 标记（默认情况下，CORS 请求不会发送 cookie，而 withCredentials 标记会在请求中加入 Access-Control-Allow-Credentials 头，这样请求就会将目标域的 cookie 包含在请求中）
responseType：字符串，设置 XMLHttpRequestResponseType 属性，类型有：””（字符串，默认值）、”attaybugger”（ArrayBuffer）、”blob”（blob 对象）、”document”（HTTP 文档）、”json”（从 JSON 对象解析而来的 JSON 字符串）、”text”（字符串）、”moz-blob”（Firefox 的接收进度事件）、”moz-chunked-text”（文本流）、”moz-chunked-arraybuffer”（ArrayBuffer 流）

缓存请求

默认情况下，$http 服务并不会对请求进行本地缓存，启用缓存：

1
2
3

$http.get('/api/users.json', { cache: true })
    .success(function(data){ })
    .error(function(data){ });

这个例子中，设置了启用缓存，AngularJS 默认会使用 $cacheFactory，这个服务是 AngularJS 在启动时自动创建的。如果需要对缓存更多的自定义控制，比如使用 LRU（Least Recently Userd，最近最少使用）缓存：

var lru = $cacheFactory('lru', {
    capacity: 20
});
$http.get('/api/users.json', { cache: lru })
    .success(function(data){ })
    .error(function(data){ })

如果觉得每次请求都这样设置很麻烦，那么就在配置中统一配置吧：

angular.module('myApp', [])
    .config(function($httpProvider, $cacheFactory){
        $httpProvider.defaults.cache = $cacheFactory('lru', {
            capacity: 20
        });
    });

拦截器

自己配置一下就行了，主要是不会玩 promise

$httpProvider

在配置里可以注入这玩意对所有的 XHR 请求统一配置

$resource

AngularJS 内置提供的一种与 RESTful 的服务端数据源交互的服务，你就知道它很好用就是了。。。

Restangular

AngularJS 非置提供的一种与 RESTful 的服务端数据源交互的服务，你就知道它很好很强大就行了。。。

Javaer

Just for fun