codecamp

AngularJS HTTP请求

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

angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  var p = $http({
    method: 'GET',
    url: '/json'
  });
  p.success(function(response, status, headers, config){
      $scope.name = response.name;
  });
});
angular.bootstrap(document.documentElement, ['app']);

$http 接受的配置项有:

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

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

var $config = this.defaults = {
  // transform incoming response data
  transformResponse: [function(data) {
    if (isString(data)) {
      // strip json vulnerability protection prefix
      data = data.replace(PROTECTION_PREFIX, '');
      if (JSON_START.test(data) && JSON_END.test(data))
        data = fromJson(data, true);
    }
    return data;
  }],

  // transform outgoing request data
  transformRequest: [function(d) {
    return isObject(d) && !isFile(d) ? toJson(d) : d;
  }],

  // default headers
  headers: {
    common: {
      'Accept': 'application/json, text/plain, */*',
      'X-Requested-With': 'XMLHttpRequest'
    },
    post: {'Content-Type': 'application/json;charset=utf-8'},
    put:  {'Content-Type': 'application/json;charset=utf-8'}
  }
};

注意它默认的 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 会为你替换成真正的函数名:

var p = $http({
  method: 'JSONP',
  url: '/json',
  params: {callback: 'JSON_CALLBACK'}
});
p.success(function(response, status, headers, config){
    console.log(response);
    $scope.name = response.name;
});

$http 有两个属性:

  • defaults 请求的全局配置
  • pendingRequests 当前的请求队列状态
$http.defaults.transformRequest = function(data){console.log('here'); return data;}
console.log($http.pendingRequests);


AngularJS 定义模板变量标识标签
AngularJS $q的方法介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }