本文實(shí)例講述了AngularJS出現(xiàn)$http異步后臺(tái)無法獲取請(qǐng)求參數(shù)問題的解決方法。分享給大家供大家參考，具體如下：

angular在通過異步提交數(shù)據(jù)時(shí)使用了與jQuery不一樣的請(qǐng)求頭部和數(shù)據(jù)序列化方式,導(dǎo)致部分后臺(tái)程序無法正常解析數(shù)據(jù)。

原理分析（網(wǎng)上的分析）：

對(duì)于AJAX應(yīng)用（使用XMLHttpRequests）來說，向服務(wù)器發(fā)起請(qǐng)求的傳統(tǒng)方式是：獲取一個(gè)XMLHttpRequest對(duì)象的引用、發(fā)起請(qǐng)求、讀取響應(yīng)、檢查狀態(tài)碼，最后處理服務(wù)端的響應(yīng)。整個(gè)過程示例如下：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {
    var response = xmlhttp.responseText;
  }else if(xmlhttp.status == 400) { //或者可以是任何以4開頭的狀態(tài)碼
    //優(yōu)雅地處理錯(cuò)誤
  }
};
//建立連接
xmlhttp.open("GET", "http://myserver/api", true);
//發(fā)起請(qǐng)求
xmlhttp.send();

對(duì)于簡(jiǎn)單、常用而且會(huì)經(jīng)常重復(fù)的任務(wù)來說，這是一種很煩瑣的工作。如果你想復(fù)用以上過程，你應(yīng)該進(jìn)行封裝或者使用代碼庫。

AngularJS XHR API遵守一種通常被稱為Promise的接口。由于XHR是異步調(diào)用的方法，所以服務(wù)端的響應(yīng)會(huì)在未來某個(gè)不確定的時(shí)間點(diǎn)上返回（我們希望它立即能返回）。Promise接口規(guī)定了處理這種響應(yīng)的方式，并且允許Promise的使用者以一種可預(yù)見的方式來使用它。

例如，我們要從服務(wù)端獲取一個(gè)用戶的信息，假設(shè)用來接受請(qǐng)求的后臺(tái)接口位于/api/user路徑上，此接口可以接受一個(gè)id屬性作為URL參數(shù)，那么使用Angular的核心$http服務(wù)發(fā)起XHR請(qǐng)求的方法示例如下：

$http.get('api/user', {params: {id:'5'}
}).success(function(data, status, headers, config) {
  //加載成功之后做一些事
}).error(function(data, status, headers, config) {
  //處理錯(cuò)誤
});

如果你是jQuery使用者，你應(yīng)該會(huì)發(fā)現(xiàn)，AngularJS和jQuery在對(duì)異步請(qǐng)求的處理方面非常類似。

上面例子中使用的$http.get方法是AngularJS的核心服務(wù)$http所提供的眾多快捷方法之一。類似地，如果你想使用AngularJS向同一個(gè)URL發(fā)送POST請(qǐng)求，同時(shí)帶上一些POST數(shù)據(jù)，你可以像下面這樣做：

var postData = {text:'long blob of text'};
//下面這一行會(huì)被當(dāng)成參數(shù)附加到URL后面，所以post請(qǐng)求最終會(huì)變成/api/user?id=5
var config = {params: {id: '5'}};
$http.post('api/user', postData, config
).success(function(data, status, headers, config) {
  //成功之后做一些事情
}).error(function(data, status, headers, config) {
  //處理錯(cuò)誤
});

對(duì)于大多數(shù)常用的請(qǐng)求類型，都有類似的快捷方法，這些請(qǐng)求類型包括：GET、HEAD、POST、DELETE、PUT、JSONP。

一.進(jìn)一步配置請(qǐng)求

雖然標(biāo)準(zhǔn)的請(qǐng)求方式使用起來比較簡(jiǎn)單，但是，有時(shí)候會(huì)存在可配置性不佳的缺點(diǎn)。如果你想要實(shí)現(xiàn)下面這些事情就會(huì)遇到困難：

a.給請(qǐng)求加上一些授權(quán)頭。
b.修改對(duì)緩存的處理方式。
c.用一些特殊的方式來變換發(fā)送出去的請(qǐng)求，或者變換接收到的響應(yīng)。

在這些情況下，你可以給請(qǐng)求傳遞一個(gè)可選的配置對(duì)象，從而對(duì)請(qǐng)求進(jìn)行深度配置。在前面的例子中，我們使用config對(duì)象指定了一個(gè)可選的URL參數(shù)。但是那里的GET和POST方法是一些快捷方式。這種深度簡(jiǎn)化之后的方法調(diào)用示例如下：

$http(config)

下面是一個(gè)基本的偽代碼模板，用來調(diào)用前面的這個(gè)方法：

$http({
  method: string,
  url: string,
  params: object,
  data: string or object,
  headers: object,
  transformRequest: function transform(data, headersGetter) or an array of functions,
  transformResponse: function transform(data, headersGetter) or an array of functions,
  cache: boolean or Cache object,
  timeout: number,
  withCredentials: boolean
});

GET、POST及其他快捷方法都會(huì)自動(dòng)設(shè)置method參數(shù)，所以不需要手動(dòng)設(shè)置。config對(duì)象會(huì)作為最后一個(gè)參數(shù)傳遞給$http.get和$http.post，所以，在所有的快捷方法內(nèi)部都可以使用這個(gè)參數(shù)。你可以傳遞config對(duì)象來修改發(fā)送的請(qǐng)求，config對(duì)象可以設(shè)置以下鍵值。

method：一個(gè)字符串，表示HTTP請(qǐng)求的類型，例如GET或者POST。
url：URL字符串，表示請(qǐng)求的絕對(duì)或者相對(duì)資源路徑。
params：一個(gè)鍵和值都是字符串的對(duì)象（確切來說是一個(gè)map），表示需要轉(zhuǎn)換成URL參數(shù)的鍵和值。例如：

[{key1: 'value1', key2: 'value2'}]

將會(huì)被轉(zhuǎn)換成

?key1=value&key2=value2

并會(huì)被附加到URL后面。如果我們使用js對(duì)象（而不是字符串或者數(shù)值）作為map中的值，那么這個(gè)js對(duì)象會(huì)被轉(zhuǎn)換成JSON字符串。

data：一個(gè)字符串或者對(duì)象，它會(huì)被當(dāng)作請(qǐng)求數(shù)據(jù)發(fā)送。
timeout：在請(qǐng)求超時(shí)之前需要等待的毫秒數(shù)。

二.設(shè)置HTTP頭

AngularJS帶有一些默認(rèn)的請(qǐng)求頭，Angular發(fā)出的所有請(qǐng)求上都會(huì)帶有這些默認(rèn)的請(qǐng)求頭信息。默認(rèn)請(qǐng)求頭包括以下兩個(gè)：

1.Accept:appliction/json,text/pain,/
2.X-Requested-With: XMLHttpRequest

如果想設(shè)置特殊的請(qǐng)求頭，可以用如下兩種方法實(shí)現(xiàn)。

第一種方法，如果你想把請(qǐng)求頭設(shè)置到每一個(gè)發(fā)送出去的請(qǐng)求上，那么你可以把需要使用的特殊請(qǐng)求頭設(shè)置成AngularJS的默認(rèn)值。這些值可以通過$httpProvider.defaults.headers配置對(duì)象來設(shè)置，通常會(huì)在應(yīng)用的配置部分來做這件事情。所以，如果你想對(duì)所有的GET請(qǐng)求使用“DO NOT TRACK"頭，同時(shí)對(duì)所有請(qǐng)求刪除Requested-With頭，可以簡(jiǎn)單地操作如下：

angular.module('MyApp', []).
  config(function($httpProvider) {
    //刪除AngularJS默認(rèn)的X-Request-With頭
    delete $httpProvider.default.headers.common['X-Requested-With'];
    //為所有GET請(qǐng)求設(shè)置DO NOT TRACK
    $httpProvider.default.headers.get['DNT'] = '1';
});

如果你只想對(duì)某些特定的請(qǐng)求設(shè)置請(qǐng)求頭，但不把它們作為默認(rèn)值，那么你可以把頭信息作為配置對(duì)象的一部分傳遞給$http服務(wù)。同樣的，自定義頭信息也可以作為第二個(gè)參數(shù)的一部分傳遞給GET請(qǐng)求，第二個(gè)參數(shù)還可以同時(shí)接受URL參數(shù)。

$http.get('api/user', {
   //設(shè)置Authorization(授權(quán))頭。在真實(shí)的應(yīng)用中，你需要到一個(gè)服務(wù)里面去獲取auth令牌
   headers: {'Authorization': 'Basic Qzsda231231'},
   params: {id:5}
}).success(function() {//處理成功的情況 });

三.緩存響應(yīng)

對(duì)于HTTP GET請(qǐng)求，AngularJS提供了一個(gè)開箱即用的簡(jiǎn)單緩存機(jī)制。默認(rèn)情況下它對(duì)所有請(qǐng)求類型都不可用，為了啟用緩存，你需要做一些配置：

$http.get('http://server/myapi', {
  cache: true
}).success(function() {//處理成功的情況});

這樣就可以啟用緩存，然后AngularJS將會(huì)緩存來自服務(wù)器的響應(yīng)。下一次向同一個(gè)URL發(fā)送請(qǐng)求的時(shí)候，AngularJS將會(huì)返回緩存中的響應(yīng)內(nèi)容。緩存也是智能的，所以即使你向同一個(gè)URL發(fā)送多次模擬的請(qǐng)求，緩存也只會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，而且在收到服務(wù)端的響應(yīng)之后，響應(yīng)的內(nèi)容會(huì)被分發(fā)給所有請(qǐng)求。

但是，這樣做有些不太實(shí)用，因?yàn)橛脩魰?huì)先看到緩存的舊結(jié)果，然后看到新的結(jié)果突然出現(xiàn)。例如，當(dāng)用戶即將點(diǎn)擊一條數(shù)據(jù)時(shí)，它可能會(huì)突然發(fā)生變化。

注意，從本質(zhì)上來說，響應(yīng)（即使是從緩存中讀取的）依然是異步的。換句話說，在第一次發(fā)出請(qǐng)求的時(shí)候，你應(yīng)該使用處理異步請(qǐng)求的方式來編碼。

四.轉(zhuǎn)換請(qǐng)求和響應(yīng)

對(duì)于所有通過$http服務(wù)發(fā)出的請(qǐng)求和收到的響應(yīng)來說，AngularJS都會(huì)進(jìn)行一些基本的轉(zhuǎn)換，包括如下內(nèi)容。

1.轉(zhuǎn)換請(qǐng)求

如果請(qǐng)求的配置對(duì)象屬性中包含JS對(duì)象，那么就把這個(gè)對(duì)象序列化成JSON格式。

2.轉(zhuǎn)換響應(yīng)

如果檢測(cè)到了XSRF（Cross Site Request Forgery的縮寫，意為跨站請(qǐng)求偽造，這是跨站腳本攻擊的一種方式）前綴，則直接丟棄。如果檢測(cè)到了JSON響應(yīng)，則使用JSON解析器對(duì)它進(jìn)行反序列化。

如果你不需要其中的某些轉(zhuǎn)換，或者想自已進(jìn)行轉(zhuǎn)換，可以在配置項(xiàng)里面?zhèn)魅胱砸训暮瘮?shù)。這些函數(shù)會(huì)獲取HTTP的request/response體以及協(xié)議頭信息，然后輸出序列化、修改之后的版本?？梢允褂胻ransformLRequest和transformResponse作為key來配置這些轉(zhuǎn)換函數(shù)，而這兩個(gè)函數(shù)在模塊的config函數(shù)中是用$httpProvider服務(wù)來配置的。

我們什么時(shí)候需要使用這些東西呢？假設(shè)我們有一個(gè)服務(wù)，它更適合用jQuery的方式來操作。POST數(shù)據(jù)使用key1=val1&key2=val2(也就是字符串)形式來代替{key1:val1, key2:val2}JSON格式。我們可以在每個(gè)請(qǐng)求中來進(jìn)行這種轉(zhuǎn)換，也可以添加一個(gè)獨(dú)立transformRequest調(diào)用，對(duì)于當(dāng)前這個(gè)例子來說，我們打算添加一個(gè)通用的transformRequest，這樣所有發(fā)出的請(qǐng)求都會(huì)進(jìn)行這種從JSON到字符串的轉(zhuǎn)換。下面就是實(shí)現(xiàn)方式：

var module = angular.module('myApp');
module.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest = function(data) {
     //使用jQuery的param方法把JSON數(shù)據(jù)轉(zhuǎn)換成字符串形式
     return $.param(data);
   };
});

實(shí)列配置：

在使用中發(fā)現(xiàn)后臺(tái)程序還是無法解析angular提交的數(shù)據(jù)，對(duì)比后發(fā)現(xiàn)頭部缺少‘X-Requested-With'項(xiàng)

所以在配置中加入：

下面貼入測(cè)試時(shí)的部分配置代碼：

angular.module('app', [
  'ngAnimate',
  'ngCookies',
  'ngResource',
  'ngRoute',
  'ngSanitize',
  'ngTouch'
],function ($httpProvider) {
  // 頭部配置
  $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';
  $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
  /**
   * 重寫angular的param方法，使angular使用jquery一樣的數(shù)據(jù)序列化方式 The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */
  var param = function (obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
    for (name in obj) {
      value = obj[name];
      if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if (value instanceof Object) {
        for (subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if (value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }
    return query.length ? query.substr(0, query.length - 1) : query;
  };
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function (data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
}).config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論