前端开发框架总结之Angular实用技巧（四）

                       前端开发框架总结之Angular实用技巧（四）

上文讲了Angular中路由的相关的知识，掌握了这些，我们就可以构建比较复杂的页面结构和UI交互了。今天我们再来介绍下angular $http请求相关的知识。

• angular网络请求

angular的网络请求方式在不同的版本是不一样的，但方式大差不差。直接上代码，大家参考这个方式写就行了。

    function doAuth() {
        $http({
            method: 'POST',
            headers:{'Content-Type':'application/json-rpc'},
            url: Constants.zabbixUrl,
            data: JSON.stringify(reqObj),
        }).success(function(data,status,headers,config){
            if(data.result){
                Constants.zabbixAuth = data.result;
            }
        }).error(function(data,status,headers,config){
        });
    };

我们常用的参数也就这几项。

method：请求方式，包括post get等

headers：请求头信息。

url：请求路径

data：包体中携带的数据。

params：区别于data，这个是get类型的参数，默认的会用$httpParamSerializer进行序列化。

transformRequest:请求数据的头部和包体的“拦截器”,拦截的第一个参数对应的是data所携带的数据，可以对这个数据进行序列化。

在springmvc框架中使用angular的话，前端数据如果是一个对象，如果想要在后台do方法中做到正确的映射，可以把对象放在params中，也可以把对象放在data中，但是要通过transformRequest进行序列化。

另外springmvc中前台请求的头部信息中Content-Type是需要配置成'application/x-www-form-urlencoded;charset=utf-8'的，不能配置成json格式的，否则会造成后台无法接收到数据。

 

请求成功返回会进入success的回调。失败会进入error的回调。$http返回的是一个promise。

$http请求头的默认配置方式：

  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';

$http请求的拦截方式：

  $httpProvider.interceptors.push(['$rootScope', '$q','$timeout','$cookies','Constants', function ($rootScope, $q, $timeout,$cookies,Constants) {
    return {
      'request': function (config) {
        config.headers['X-Requested-With'] = 'XMLHttpRequest';
        config.timeout = 30000;
        config.cache = false;

        if (config.url.search(/log-service-idgen\*/) >= 0) {
            return config || $q.when(config);
        }

        if (config.method == "POST") {
            config.headers['USER'] = $cookies.get('account');
            config.headers['TOKEN'] = $cookies.get('token');

            if (config.url.search(/\?/) >= 0) {
                config.url = config.url + "&ver=" + new Date().getTime();
            } else {
                config.url = config.url + "?ver=" + new Date().getTime();
            }
        } else if (config.method == "GET") {
          if (config.url.search(/\?/) >= 0) {
            config.url = config.url + "&ver=" + new Date().getTime();
          } else {
            config.url = config.url + "?ver=" + new Date().getTime();
          }
        }
        return config || $q.when(config);
      },
      'requestError': function (rejection) {
        return rejection;
      },
      'response': function (response) {
        if (response.headers().sessionstatus == "timeout") {

          return {
            data: {
              result: false,
              message: {
                errCode: '401',
                errDesc: "登录超时，请重新登录!"
              }
            }
          };
        } else {
          return response || $q.when(response);
        }

      },
      'responseError': function (response) {
        if (response.status === 401) {
          $rootScope.alertObj = {
            isShow: true,
            text: "未授权，请先登录！",
            fun: function () {
              $rootScope.loginUser = {};
              $rootScope.changeState('login', {actionType: 1});
            }
          };
          return false;
        } else if (response.status === 404) {
          $rootScope.alertObj = {
            isShow: true,
            text: "访问的地址不存在！",
            fun: function () {
            }
          };
          return false;

        } else if (response.status === 500) {
          $rootScope.alertObj = {
            isShow: true,
            text: "服务器内部异常！",
            fun: function () {
            }
          };
          return false;
        } else if (response.status === 504) {
          $rootScope.alertObj = {
            isShow: true,
            text: "连接服务超时，请稍后重试！",
            fun: function () {
            }
          };
          return $q.reject(response);
        } else {
          $rootScope.alertObj = {
            isShow: true,
            text: response.statusText ? response.statusText : "网络异常！",
            fun: function () {
            }
          };
          return false;
        }
        return $q.reject(response);
      }
    };
  }]);

另外说明一点，angular的$http是异步的，没有想jquery中还提供了了同步的配置方式。

有一篇文章对$http参数介绍挺详细的：https://blog.csdn.net/Candy_home/article/details/47114157