欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年05月06日 11:22:41   投稿:lqh  
這篇文章主要介紹了 AngularJS封裝$http.post()實例詳解的相關(guān)資料,需要的朋友可以參考下

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

用了不是很長的時間跟了一個移動APP項目,用的是ionic + AngularJS + cordova框架,其間遇到過挺多問題,其中一個就是對Ajax的封裝問題。

其實針對封裝問題一直以來就沒停止過談?wù)摚煌捻椖恳灿胁煌男枨?,舉個典型的例子,我在做這個項目的時候因為一開始沒有考慮封裝問題所以被批評了,而我的一個朋友卻因為封裝了受到了批評……很尷尬不是么。

那么對于是否要封裝這個問題,究竟該怎么界定?其實這不是一個很復(fù)雜的問題,歸根到底就是一個收益比率的問題,如果項目規(guī)模不是很大,那么過多考慮封裝問題本身就沒什么意義,對于項目的收益極低;而對于規(guī)模大的項目來說,如果不封裝,那么潛在的風(fēng)險就高得多,所以前期的投入也是值得的。

當(dāng)然這個問題并不是我這樣一個小白能掰扯清楚的事情,今天就來說說如果考慮封裝的話,那么我會怎么處理。

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

第二點,我需要考慮每一個使用者在應(yīng)答到來時如何處理結(jié)果,針對success和error兩種情況,我需要為他們提供一個處理邏輯的入口。

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

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);
  }
  }
}]);

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

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

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

如果使用者并沒有定義成功回調(diào),好吧,這層封裝就當(dāng)是不存在,我會把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 () {
    /*無論何總情況下都應(yīng)該被執(zhí)行的邏輯*/
   }
)

如此對于http.post()的封裝基本上就算是完成了。其中有一個地方需要注意,如果我在處理successFn的時候,用了angular.isDefined()判斷調(diào)用者是否定義了回調(diào),如果沒有,我將把處理權(quán)利交給調(diào)用者,如果已定義我將代為處理。其中then()方法比較有趣,因為http方法返回的是一個promise對象,在響應(yīng)返回的時候可以通過then()來處理響應(yīng),其實完全可以通過promise.success()和promise.error()來處理不同響應(yīng)狀態(tài)的回調(diào),但是用then()更好一些,因為它接收到的是完整的響應(yīng)對象,而success()和error()會對響應(yīng)對象進(jìn)行解析,具體的差別讀者可以通過console輸出來看看。

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

 感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關(guān)文章

最新評論