AngularJS封裝$http.post()實(shí)例詳解

用了不是很長(zhǎng)的時(shí)間跟了一個(gè)移動(dòng)APP項(xiàng)目，用的是ionic + AngularJS + cordova框架，其間遇到過(guò)挺多問(wèn)題，其中一個(gè)就是對(duì)Ajax的封裝問(wèn)題。

其實(shí)針對(duì)封裝問(wèn)題一直以來(lái)就沒(méi)停止過(guò)談?wù)?，不同的?xiàng)目也有不同的需求，舉個(gè)典型的例子，我在做這個(gè)項(xiàng)目的時(shí)候因?yàn)橐婚_始沒(méi)有考慮封裝問(wèn)題所以被批評(píng)了，而我的一個(gè)朋友卻因?yàn)榉庋b了受到了批評(píng)……很尷尬不是么。

那么對(duì)于是否要封裝這個(gè)問(wèn)題，究竟該怎么界定？其實(shí)這不是一個(gè)很復(fù)雜的問(wèn)題，歸根到底就是一個(gè)收益比率的問(wèn)題，如果項(xiàng)目規(guī)模不是很大，那么過(guò)多考慮封裝問(wèn)題本身就沒(méi)什么意義，對(duì)于項(xiàng)目的收益極低；而對(duì)于規(guī)模大的項(xiàng)目來(lái)說(shuō)，如果不封裝，那么潛在的風(fēng)險(xiǎn)就高得多，所以前期的投入也是值得的。

當(dāng)然這個(gè)問(wèn)題并不是我這樣一個(gè)小白能掰扯清楚的事情，今天就來(lái)說(shuō)說(shuō)如果考慮封裝的話，那么我會(huì)怎么處理。

angularjs中提供了一個(gè)服務(wù)http，它用來(lái)處理Ajax請(qǐng)求，這里我假設(shè)讀者是了解angularjs的，所以直奔主題：對(duì)于post請(qǐng)求該如何處理封裝。首先我需要確定一個(gè)事情，我能否排除所有使用者（項(xiàng)目團(tuán)隊(duì)成員）的個(gè)性化需求（需特殊處理的情況）。如果我不能，那么我該如果開放接口才能將post請(qǐng)求還原，所以我需要一個(gè)出口返回http.post()。

第二點(diǎn)，我需要考慮每一個(gè)使用者在應(yīng)答到來(lái)時(shí)如何處理結(jié)果，針對(duì)success和error兩種情況，我需要為他們提供一個(gè)處理邏輯的入口。

綜合上面兩點(diǎn)，我大概有了思路，我需要定義一個(gè)服務(wù)（公共服務(wù)），并且提供一個(gè)myPost方法，其中我允許使用者定義響應(yīng)的回調(diào)，并且我允許他們?nèi)〉酶杂傻奶幚矸绞?，給他們一個(gè)原原本本的post()。好在js足夠靈活，所以我可以這樣來(lái)寫：

service('myHttpService', ['$http', function ($http) {
  var myHttpPost = function (url, data, successFn, errorFn) {
  }
  return {
    myHttp: function (url, data, successFn, errorFn) {
      return myHttpPost(url, data, successFn, errorFn);
  }
  }
}]);

如上，我會(huì)return內(nèi)部定義的方法，這個(gè)方法允許使用者定義successFn和errorFn，即相應(yīng)成功和失敗的回調(diào)，如此一來(lái)使用者大可放心的預(yù)先編寫數(shù)據(jù)的處理邏輯，而無(wú)需關(guān)心其他細(xì)節(jié)。

另外，我允許使用者拿到更加靈活的post()，那么我是這樣實(shí)現(xiàn)的：

var httpPromise = $http.post(url, data, {timeout: 30000});
if (!angular.isDefined(successFn)) {
  return httpPromise;
}

如果使用者并沒(méi)有定義成功回調(diào)，好吧，這層封裝就當(dāng)是不存在，我會(huì)把post()丟出去，由調(diào)用者自行處理。而如果調(diào)用者想預(yù)先定義的話，我應(yīng)當(dāng)在封裝中處理好他們的邏輯：

return httpPromise.then(
    function (response) {
     if (response.status) {
      return successFn(response);
     } else {
      /*其他處理*/
     }
    },
    function (error) {
     if (!angular.isDefined(errorFn)) {
      /*其他處理*/
     } else {
      return errorFn(error);
     }
    },
   function () {
    /*無(wú)論何總情況下都應(yīng)該被執(zhí)行的邏輯*/
   }
)

如此對(duì)于http.post()的封裝基本上就算是完成了。其中有一個(gè)地方需要注意，如果我在處理successFn的時(shí)候，用了angular.isDefined()判斷調(diào)用者是否定義了回調(diào)，如果沒(méi)有，我將把處理權(quán)利交給調(diào)用者，如果已定義我將代為處理。其中then()方法比較有趣，因?yàn)閔ttp方法返回的是一個(gè)promise對(duì)象，在響應(yīng)返回的時(shí)候可以通過(guò)then()來(lái)處理響應(yīng)，其實(shí)完全可以通過(guò)promise.success()和promise.error()來(lái)處理不同響應(yīng)狀態(tài)的回調(diào)，但是用then()更好一些，因?yàn)樗邮盏降氖峭暾捻憫?yīng)對(duì)象，而success()和error()會(huì)對(duì)響應(yīng)對(duì)象進(jìn)行解析，具體的差別讀者可以通過(guò)console輸出來(lái)看看。

以上是我對(duì)$http.post()的一次簡(jiǎn)單封裝，雖然簡(jiǎn)陋，但是足以應(yīng)付大多數(shù)情形，并且保留了更自由的處理方式，非常感謝和我一起討論的朋友們，一起探討這次的封裝，收獲很大，也希望對(duì)其他朋友所有幫助。

 感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論