http.js 在Ajax單頁面中的應(yīng)用

DC_er 發(fā)布于2019-08-21 10:17 / 3450人閱讀

摘要：發(fā)送全局參數(shù)我做單頁面應(yīng)用時(shí)，會(huì)有這樣一個(gè)情景當(dāng)用戶登錄后，服務(wù)器會(huì)返回一個(gè)值，之后的大部分請(qǐng)求都需要傳遞這個(gè)參數(shù)。因此，我在中增加這樣一個(gè)函數(shù)來解決上面的問題。

關(guān)于作者

馬隆博(Lenbo Ma)，Java，Javascript

Blog: http://mlongbo.com

E-Mail: mlongbo@gmail.com

文章編寫于: 2014/08/10

轉(zhuǎn)載請(qǐng)注明出處:

http://mlongbo.com/http-js-zai-ajaxdan-y...

要解決的問題

簡化api使用;

為頁面中Ajax請(qǐng)求設(shè)置全局?jǐn)r截器;

頁面中所有Ajax請(qǐng)求向服務(wù)器發(fā)送全局參數(shù);

實(shí)現(xiàn) 簡化API

我個(gè)人喜歡鏈?zhǔn)秸{(diào)用，以及簡單明了的API設(shè)計(jì)。因此，我主要在以下幾個(gè)部分做了簡化:

為每種請(qǐng)求類型增加一個(gè)函數(shù)。如: $http.get(); $http.post(); $http.del(); $http.put();

可以動(dòng)態(tài)設(shè)置請(qǐng)求參數(shù);

req.push(key,val); or req.push(jsonObj); //設(shè)置請(qǐng)求參數(shù), 可同時(shí)增加一個(gè)或多個(gè)參數(shù)

req.data(jsonObj); //會(huì)覆蓋push函數(shù)設(shè)置過的值

req.header(key,val); or req.header(jsonObj); //請(qǐng)求頭, 可同時(shí)增一個(gè)或多個(gè)

req.headers(jsonObj); //會(huì)覆蓋header函數(shù)設(shè)置過的值

同樣, 其他的功能也可以拆分成獨(dú)立函數(shù)來設(shè)置, 比如:

req.type(typeStr); //設(shè)置響應(yīng)數(shù)據(jù)類型

req.cache(boolean); //是否緩存

總之，你完全可以按照你自己最喜愛的方式定制API。

攔截器實(shí)現(xiàn)

之所以會(huì)有攔截器的需求，是因?yàn)槲抑八龅囊粋€(gè)應(yīng)用的數(shù)據(jù)響應(yīng)格式如下:

{
  code: 1,
  message: "響應(yīng)信息"
}

其中code值會(huì)有這樣幾種值:

0 failed

1 success

2 session timeout

因此我需要統(tǒng)一處理會(huì)話過期情況，比如通知用戶重新登錄等。

我使用req.interceptor(type,func(res){}); 來增加一個(gè)攔截器。當(dāng)服務(wù)器響應(yīng)數(shù)據(jù)時(shí)，將先調(diào)用設(shè)置的全局?jǐn)r截器，之后再去調(diào)用業(yè)務(wù)相關(guān)的回調(diào)函數(shù)。如果我http.js去服務(wù)器獲取html模板代碼時(shí)，即響應(yīng)的數(shù)據(jù)類型是text/html，而不是application/json，這時(shí)候再去做攔截就不好玩了。因此，我用了一個(gè)type參數(shù)來給interceptor分組。

發(fā)送全局參數(shù)

我做單頁面應(yīng)用時(shí)，會(huì)有這樣一個(gè)情景:

當(dāng)用戶登錄后，服務(wù)器會(huì)返回一個(gè)token值，之后的大部分api請(qǐng)求都需要傳遞這個(gè)token參數(shù)。因此，如果在每次ajax請(qǐng)求時(shí)都手動(dòng)增加一個(gè)token參數(shù)值，就感覺有些效率低下。同樣，你的同事們可能也會(huì)遇到和你同樣的情況，這時(shí)候還要一個(gè)個(gè)告訴他們?cè)趺丛O(shè)置token參數(shù)就很不好玩兒了。

因此，我在http.js中增加$http.global(key,val); or $http.global(jsonObj);這樣一個(gè)函數(shù)來解決上面的問題。

結(jié)語

至于基于什么ajax庫來封裝，你可以使用原生ajax，jquery ajax，或者其他你喜歡的ajax library。同時(shí)，歡迎各種討論 ^_^

這是我寫的http.js代碼片段，不太全面，也許可供你參考。

掃描二維碼，關(guān)注我。
內(nèi)容大多會(huì)是后端技術(shù)、前端工程、DevOps，偶爾會(huì)有一些大數(shù)據(jù)相關(guān)，會(huì)推薦一些好玩的東西。希望你會(huì)喜歡~