基於jquery的ajax方法的二次封裝

2021-07-25 18:31:15 字數 1556 閱讀 2483

我並不是專業的前端開發攻城獅,所以,這篇文章的水平,可能是比較低的,裡面一些觀點,可能都比較可笑。如果有疏漏或錯誤的地方,希望大家能指出來。如果文章的價值不大,也希望大牛能指點一二,在此先謝謝了。

在做實際開發過程中,由於後台只提供介面,不管是android、ios還是h5開發,都是通過呼叫同一套後台介面去獲取資料,android和ios是通過各自的系統提供的http請求方法去做資料請求的。而h5端,我是採用了ajax的方法來實現載入的,拋棄了類似jsp這樣的後端渲染方案。我採用的是jquery提供的ajax方法來實現資料載入的。jquery提供的ajax方法,已經非常簡潔實用了。但為何還要做二次封裝呢?

在實際專案過程中,剛開始,我並沒有這種想法,我認為jquery提供的ajax方法已經夠簡單了。但專案大概進展了一半的時候,突然發現,寫的ajax方法,**挺多都是重複的,但這個時候,並沒有意識到我應該做些什麼。直到一天,後台介面發現所有的請求,都缺少乙個關鍵引數,這個時候,我的h5端的所有的ajax請求,都得乙個乙個手動去新增引數。沒辦法,只能乙個乙個手動去新增了。但是,這個時候我就在考慮乙個問題,假如後期後台又發現缺少乙個關鍵引數,我該怎麼辦?難道讓我再乙個乙個請求方法去手動新增嗎?那還不得累死我啊?另外,如果有個疏漏,漏掉一兩個請求方法,那回頭排查問題,所需的時間,也不少。能不能想個簡單的辦法,如果有修改,我改動一處,所有的請求都同步修改過來呢?這個時候,我想起了我在做android開發中,經常會做一些二次封裝,也許各個專案不同,但乙個專案中,我只需要在乙個地方控制一下,就可以做到全域性同步修改過來。基於這個想法,我想嘗試一下,可以不可以對ajax做一下二次封裝。

思路是有了,但我之前並沒有做過h5端的開發,至於這個思路是否可行,心裡還沒有底。但如果不嘗試一下,又怎麼知道可行不可行呢?大不了就是浪費一些時間罷了。在這個想法下,於是開始了我的ajax二次封裝之路。

當然,既然是基於jquery的ajax方法的二次封裝,其主要內容還是jquery的ajax方法,所有的請求,最終也是走ajax方法。我只是想做一些統一處理,比如,新增一些統一的請求引數,對響應異常,做一下統一處理,方便我對請求做統一處理,同時也方便統一修改。我在封裝方法裡,在請求開始前,顯示載入效果,在請求結束(不管是請求成功還是請求出錯)的時候,結束掉載入效果。那麼,我的所有請求,都會顯示乙個統一的載入效果,同時,又不用在每個請求前,新增顯示載入效果的**、在載入結束後結束載入效果的**。在請求header裡,統一新增需要的請求頭引數。也可以在請求data裡,統一新增請求引數。在響應成功方法裡,除了結束掉載入效果外,我還對返回的json資料做了一次統一處理,異常響應在這裡就可以處理掉,不需要業務層每個介面都單獨處理......由於各個專案的需求都不同,所以,每個專案對ajax的封裝可能不會完全一致,但都大同小異。當然,具體封裝還需要根據具體的業務需求,靈活處理。另附上我的**片段

也許已經有大牛做了這樣的工作了,但由於我的技術水平不夠,不足以閱讀其他大作,所以,這個封裝,並沒有參考其他的文章,完全是被實際的業務需求給逼出來的,假如沒有業務變更,可能我也不會想到做這樣的工作。但不管如何,這也是我的一次嘗試。如果有更好的方案,歡迎一起**。希望各位看官不吝賜教,謝謝大家!

基於jquery的ajax封裝

jquery給我們的開發帶來了很多的便利,對其熟練的運用是現在前端開發人員的必要技能之一。其封裝的很多方法都做了相容的處理,就少去了部分開發人員做相容處理的問題,從而提高工作效率,有更多時間來學習其它技能 今天來聊聊其的ajax 方法,ajax 方法通過 http 請求載入遠端資料。ajax 返回其...

封裝通用的 ajax, 基於 jQuery。

在前端非同步獲取資料時候每次都是使用 ajax 為了通用性更好,然而封裝通用的 ajax 是乙個一勞永逸的辦法。本次基於 jquery 封裝實現 第一步 引入 jquery 第二步 實現 該封裝基於 jquery var sendajax function method,url,data,succe...

jQuery封裝ajax的方法

引數有4個,必填引數是url位址,其他引數都是選填引數,可以沒有,引數的形式是物件形式。get 引數有4個,必填引數是url位址,其他引數都是選填引數,可以沒有,引數的形式是物件形式。post 請求成功時執行的函式 有n個引數,預設請求方式是 get 方式 ajax 傳參引數,必須是物件形式,dat...