$http学习总结

2019独角兽企业重金招聘Python工程师标准>>>

　　$http是AngularJS的核心Service之一，它利用XMLHttpRequest对象或是通过JSONP来让我们可以和HTTP Server端通信，获取或者提交数据。

基本使用

　　$http Service是一个函数，它接受一个config对象作为参数，并返回一个HttpPromise对象，这个对象包含两个便捷的API，分别是success和error，可以从字面上判断一个用于请求成功，一个用于请求失败。这两个方法可以认为是分别为Promise注册的onResolved和onRejected方法。这里直接贴上官方文档上的代码：

// Simple GET request example :
$http.get('/someUrl').
    success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

　　既然这个返回值是一个Promise对象，同样可以直接使用then方法。then的onResolved和onRejected接受的唯一一个参数是一个对象，包含了data，status，statusText这些响应结果，还有headers函数用于获取相应头信息和一个之前用于请求的config对象。

　　当相应的状态码在200-299时，http请求被认为是resolved，同时$http支持自动重定向，状态码表示重定向时不会被认为是rejected，而会自动重定向。

　　$http还分别为Http Method和jsonp提供了一些快捷方法，这里不多介绍了。

为HTTP请求设置头部

　　有时你可能希望为自己的请求加上些头部或希望修改头部，$http有3种方式来修改请求头部。

　　我们可以在Angular的config阶段注入$httpProvider，来修改默认头部：

      angular.module("testapp", [])
      .config([ "$httpProvider", function($httpProvider) {
    	  var myHeader = "ApiKey";
    
    	  $httpProvider.defaults.headers.common[myHeader] = "Leo.Gao";
      }])    

　　修改common是修改了所有请求的头部，如果想修改特定HTTP Method的请求头部，可以像这样改：

    $httpProvider.defaults.headers.get[myHeader] = "Leo.Gao";

　　我们也可以在Angular的run阶段直接修改，如下：

    $httpProvider.defaults.headers.get["Pragma"] = "no-cache";

　　我们还可以给request config对象添加headers对象，来为我们的请求附加头部或是覆盖默认提供的头部。这里不做例子了。

请求响应转换器

　　请求转换器可以用来格式化我们的请求体，而响应转换器可以用来格式化我们的响应体，$http分别有一个默认的请求响应转换器，默认的请求转换器会在请求发出之前将http config中的data对象序列化成一个json字符串，而默认的响应转换器会去除XSRF的前缀")]}',\n"，并将响应体反序列化成对象。

　　转换器是一个函数，它接受两个参数，第一个是请求/响应的data，第二个是http headers getter函数，我们可以根据需求创建自己的转换器。

　　创建的3中方式和上面介绍的添加头部的三种方式是相同的，这边只列举其中一种。

    angular.module("testapp", [])
    .config([ "$httpProvider", function($httpProvider) {
    
    	$httpProvider.defaults.transformRequest =
    		appendTransform($httpProvider.defaults.transformRequest, myTransformRequest);
    
    	$httpProvider.defaults.transformResponse =
    		appendTransform($httpProvider.defaults.transformResponse, myTransformResponse);
    	
    	function myTransformRequest (data, headers) {
    		console.log(arguments);
    		console.log('myTransformRequest');
                    return data;
    	}
    
    	function myTransformResponse (data, headers) {
    		console.log(arguments);
    		console.log('myTransformResponse');
                    return data;
    	}
    
    	function appendTransform (transform, newfunc) {
    		if(!Array.isArray(transform)) transform = [ transform ];
    
    		return transform.concat(newfunc);
    	}
    }])

　　我们可以通过给$httpProvider.defaults.transformRequest/transformResponse来指定请求响应转换器，可以是一个函数，也可以是函数的数组，但是直接给它们赋值将会覆盖两个默认的转换器，这通常不会是我们想要的，可以借助一个appendTransform辅助方法来拼接数组。这些转换器是根据pipeline的方式运作的不要忘记提供返回值，第一个参数data便是上一个转换器的返回值。

缓存

　　$http可以为你的GET请求提供缓存的功能，一种比较简单的缓存方式是直接在request conifg中将cache设置为true，这样$http就会使用默认缓存来为你的GET请求提供服务了，要查看$http的默认缓存或者对缓存进行修改，只需要注入$cacheFactory并将"$http"为键获取缓存即可：

        $http.get("http://localhost:3000/rest/company?companyId=1080", { cache: true })
        	.then(function(obj) {
	    var data = obj.data;
	    console.log($cacheFactory.get('$http').info());
	}, function(err) {
	    console.log(err);
	});

　　默认缓存是以请求的url作为键的，可以通过以下方式来查看：

        var cache = $cacheFactory.get('$http'),
    	  val = cache.get("http://localhost:3000/rest/company?companyId=1080");
    
    	  console.log(val);

　　也可以自己指定缓存，只需要通过$cacheFactory创建一个缓存对象后，将该对象赋值给request config中的cache即可。

拦截器

　　$http提供了拦截器的功能，可以作为请求预处理和响应后处理：

{
// optional method
    'request': function(config) {
      // do something on success
      console.log('Interceptor preprocess request');
      return $q.reject("cc");
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
	  console.log('Interceptor preprocess request error');
      console.log(rejection);

      //if (canRecover(rejection)) {
      //  return responseOrNewPromise
      //}
      return $q.reject(rejection);
    },
    // optional method
    'response': function(response) {
      // do something on success
      console.log('Interceptor postprocess response');
      return response;
    },
    // optional method
   'responseError': function(rejection) {
      // do something on error
      console.log('Interceptor preprocess response error');
      return $q.reject(rejection);
    }
  };

　　功能似乎和转换器差不多，不过他们的执行顺序如下：

    Interceptor preprocess request
    TransformRequest
    TransformResponse
    Interceptor postprocess response

　　拦截器是一个factory，通过module.factory来实现，可用于权限控制等。

转载于:https://my.oschina.net/leogao0816/blog/361173