Ajax请求

1.http请求

基本的操作由 $http 服务提供。它的使用很简单，提供一些描述请求的参数，请求就出去了，然后返回一个扩充了success 方法和error 方法的 promise 对象（下节介绍），你可以在这个对象中添加需要的回调函数。

[javascript] view plain copy

1. var TestCtrl = function($scope, $http){  
2.   var p = $http({  
3.     method: 'GET',  
4.     url: '/json'  
5.   });  
6.   p.success(function(response, status, headers, config){  
7.       $scope.name = response.name;  
8.   });  
9. }  

$http 接受的配置项有：

• method 方法
• url 路径
• params GET请求的参数
• data post请求的参数
• headers 头
• transformRequest 请求预处理函数
• transformResponse 响应预处理函数
• cache 缓存
• timeout 超时毫秒，超时的请求会被取消
• withCredentials 跨域安全策略的一个东西

其中的 transformRequest 和transformResponse 及headers 已经有定义的，如果自定义则会覆盖默认定义：

[javascript] view plain copy

1. var $config = this.defaults = {  
2.     // transform incoming response data  
3.     transformResponse: [function (data) {  
4.         if (isString(data)) {  
5.             // strip json vulnerability protection prefix  
6.             data = data.replace(PROTECTION_PREFIX, '');  
7.             if (JSON_START.test(data) && JSON_END.test(data))  
8.                 data = fromJson(data, true);  
9.         }  
10.         return data;  
11.     }],  
12.   
13.     // transform outgoing request data  
14.     transformRequest: [function (d) {  
15.         return isObject(d) && !isFile(d) ? toJson(d) : d;  
16.     }],  
17.   
18.     // default headers  
19.     headers: {  
20.         common: {  
21.             'Accept': 'application/json, text/plain, */*',  
22.             'X-Requested-With': 'XMLHttpRequest'  
23.         },  
24.         post: {'Content-Type': 'application/json;charset=utf-8'},  
25.         put: {'Content-Type': 'application/json;charset=utf-8'}  
26.     }  
27. };  

注意它默认的 POST 方法出去的 Content-Type

对于几个标准的 HTTP 方法，有对应的 shortcut ：

• $http.delete(url, config)
• $http.get(url, config)
• $http.head(url, config)
• $http.jsonp(url, config)
• $http.post(url, data, config)
• $http.put(url, data, config)

注意其中的 JSONP 方法，在实现上会在页面中添加一个 script 标签，然后放出一个 GET 请求。你自己定义的，匿名回调函数，会被 ng 自已给一个全局变量。在定义请求，作为 GET 参数，你可以使用JSON_CALLBACK 这个字符串来暂时代替回调函数名，之后 ng 会为你替换成真正的函数名：

[javascript] view plain copy

1. var p = $http({  
2.   method: 'JSONP',  
3.   url: '/json',  
4.   params: {callback: 'JSON_CALLBACK'}  
5. }); 
   
6. //p=$q.defer().promise 利用$http服务产生了一个promise对象
   
7. p.success(function(response, status, headers, config){  
8.     console.log(response);  
9.     $scope.name = response.name;  
10. });  

$http 有两个属性：

• defaults 请求的全局配置
• pendingRequests 当前的请求队列状态

[javascript] view plain copy

1. $http.defaults.transformRequest = function(data){console.log('here'); return data;}  
2. console.log($http.pendingRequests);  

2.广义回调管理

和其它框架一样， ng 提供了广义的异步回调管理的机制。 $http 服务是在其之上封装出来的。这个机制就是 ng 的 $q 服务。

不过 ng 的这套机制总的来说实现得比较简单，按官方的说法，够用了。

使用的方法，基本上是：

• 通过 $q 服务得到一个 deferred 实例
• 通过 deferred 实例的 promise 属性得到一个 promise 对象
• promise 对象负责定义回调函数
• deferred 实例负责触发回调

[javascript] view plain copy

1. var TestCtrl = function($q){  
2.   var defer = $q.defer();  
3.   var promise = defer.promise;  
4.   promise.then(function(data){console.log('ok, ' + data)},  
5.                function(data){console.log('error, ' + data)});  
6.   //defer.reject('xx');  
7.   defer.resolve('xx');  
8. }  

了解了上面的东西，再分别看 $q ， deferred ， promise 这三个东西。

2.1 $q

$q 有四个方法：

• $q.all() 合并多个 promise ，得到一个新的 promise
• $q.defer() 返回一个 deferred 对象
• $q.reject() 包装一个错误，以使回调链能正确处理下去
• $q.when() 返回一个 promise 对象

$q.all() 方法适用于并发场景很合适：

[javascript] view plain copy

1. var TestCtrl = function($q, $http){  
2.   var p = $http.get('/json', {params: {a: 1}});  
3.   var p2 = $http.get('/json', {params: {a: 2}});  
4.   var all = $q.all([p, p2]);  
5.   p.success(function(res){console.log('here')});  
6.   all.then(function(res){console.log(res[0])});  
7. }  

$q.reject() 方法是在你捕捉异常之后，又要把这个异常在回调链中传下去时使用：

要理解这东西，先看看 promise 的链式回调是如何运作的，看下面两段代码的区别：

[javascript] view plain copy

1. var defer = $q.defer();  
2. var p = defer.promise;  
3. p.then(  
4.   function(data){return 'xxx'}  
5. );  
6. p.then(  
7.   function(data){console.log(data)}  
8. );  
9. defer.resolve('123');  

[javascript] view plain copy

1. var defer = $q.defer();  
2. var p = defer.promise;  
3. var p2 = p.then(  
4.   function(data){return 'xxx'}  
5. );  
6. p2.then(  
7.   function(data){console.log(data)}  
8. );  
9. defer.resolve('123');  

从模型上看，前者是“并发”，后者才是“链式”。

而 $q.reject() 的作用就是触发后链的error 回调：

[javascript] view plain copy

1. var defer = $q.defer();  
2. var p = defer.promise;  
3. p.then(  
4.   function(data){return data},  
5.   function(data){return $q.reject(data)}  
6. ).  
7. then(  
8.   function(data){console.log('ok, ' + data)},  
9.   function(data){console.log('error, ' + data)}  
10. )  
11. defer.reject('123');  

最后的 $q.when() 是把数据封装成 promise 对象：

[javascript] view plain copy

1. var p = $q.when(0, function(data){return data},  
2.                    function(data){return data});  
3. p.then(  
4.   function(data){console.log('ok, ' + data)},  
5.   function(data){console.log('error, ' + data)}  
6. );  

2.2 deferred

deferred 对象有两个方法一个属性。

• promise 属性就是返回一个 promise 对象的。
• resolve() 成功回调
• reject() 失败回调

[javascript] view plain copy

1. var defer = $q.defer();  
2. var promise = defer.promise;  
3. promise.then(function(data){console.log('ok, ' + data)},  
4.              function(data){console.log('error, ' + data)});  
5. //defer.reject('xx');  
6. defer.resolve('xx');  

2.3 promise

promise 对象只有 then() 一个方法，注册成功回调函数和失败回调函数，再返回一个 promise 对象，以用于链式调用。