【转】angular Ajax请求

1.http请求

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

[javascript] view plaincopy

  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 plaincopy

  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. // transform outgoing request data
  13. transformRequest: [function (d) {
  14. return isObject(d) && !isFile(d) ? toJson(d) : d;
  15. }],
  16. // default headers
  17. headers: {
  18. common: {
  19. ‘Accept‘: ‘application/json, text/plain, */*‘,
  20. ‘X-Requested-With‘: ‘XMLHttpRequest‘
  21. },
  22. post: {‘Content-Type‘: ‘application/json;charset=utf-8‘},
  23. put: {‘Content-Type‘: ‘application/json;charset=utf-8‘}
  24. }
  25. };

注意它默认的 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 plaincopy

  1. var p = $http({
  2. method: ‘JSONP‘,
  3. url: ‘/json‘,
  4. params: {callback: ‘JSON_CALLBACK‘}
  5. });
  6. p.success(function(response, status, headers, config){
  7. console.log(response);
  8. $scope.name = response.name;
  9. });

$http 有两个属性：

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

[javascript] view plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 plaincopy

  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 对象，以用于链式调用。

from :http://blog.csdn.net/violet_day/article/details/16918257

时间： 2024-08-29 11:39:03

【转】angular Ajax请求的相关文章

angular ajax请求 结果显示显示两次的问题

angular 项目中,由于用到ajax 请求,结果显示如下情况 同样的接口,显示两次,其中第一次请求情况为 request method 显示为opttions 第二次的情况是 为啥会出现如此的情况呢,是因为 调用的接口与发送ajax的页面存在跨域的问题 因此先需要一次HTTP OPTIONS请求,来判断对应server是否允许资源访问. 返回成功后,在调用post访问 参考文章http://stackoverflow.com/questions/12111936/angularjs-perf

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

Angular和jQuery的ajax请求的区别

最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

AngularJs中POST和GET方式的ajax请求

angular中ajax请求的方法说明: /* * _http:angularJs中的$http对象 * _url:ajax请求的URL * _method:请求方式:POST或GET * _params:GET方式请求时传递的参数 * _data:POST方式请求时传递的参数 * _responseType:在请求中设置XMLHttpRequestResponseType属性,""(字符串,默认), * "arraybuffer"(ArrayBuffer);&qu

js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法判断 接受的http请求是否是 ajax请求了. 怎么办呢,显然就是给http 请求头中 加上这个字段就可以了. 1.AngularJS 中可以这样子: I don't know well MVC3 but you can set a custom header for all request fr

Angular AJAX 与jq的AJAX不同

最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

angularjs学习笔记之一（ajax请求）

实现ajax请求 [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> <link rel="stylesheet" t

配置Chrome支持本地（file协议）的AJAX请求

https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html 什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:

Ajax请求传递参数遇到的问题

想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上例子吧,都是我在学习过程中遇到或者发现的一些问题.  一.创建WebAPI项目 (这个环节不是本章重点) 二.传递参数遇到的问题 后台实体类(Person): 1 namespace WebApi.Models 2 { 3 public class Person 4 { 5 6 public int