AngularJS封裝$http.post()實例詳解
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ù)情形,并且保留了更自由的處理方式,非常感謝和我一起討論的朋友們,一起探討這次的封裝,收獲很大,也希望對其他朋友所有幫助。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法
- 對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實例
- AngularJS $http模塊POST請求實現(xiàn)
- AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
- angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法
- 深入理解Angularjs中$http.post與$.post
- Angular利用HTTP POST下載流文件的步驟記錄
相關(guān)文章
AngularJS中directive指令使用之事件綁定與指令交互用法示例
這篇文章主要介紹了AngularJS中directive指令使用之事件綁定與指令交互用法,結(jié)合實例形式分析了directive指令在模板的使用,事件的綁定及元素、屬性、控制器之間的交互相關(guān)操作技巧,需要的朋友可以參考下2016-11-11詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ,具有一定的參考價值,有興趣的可以了解一下2017-08-08Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能
這篇文章主要介紹了 Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能,代碼簡單易懂,非常不錯具有參考借鑒價值,需要的朋友可以參考下2017-07-07Angular刷新當(dāng)前頁面的實現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁面的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11Angularjs實現(xiàn)數(shù)組隨機(jī)排序的方法
今天小編就為大家分享一篇Angularjs實現(xiàn)數(shù)組隨機(jī)排序的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10