亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

DC_er / 3523人閱讀

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

關(guān)于作者

馬隆博(Lenbo Ma)，Java，Javascript

Blog: http://mlongbo.com

E-Mail: mlongbo@gmail.com

文章編寫于: 2014/08/10

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

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

要解決的問題

簡化api使用;

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

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

實現(xiàn) 簡化API

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

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

可以動態(tài)設(shè)置請求參數(shù);

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

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

req.header(key,val); or req.header(jsonObj); //請求頭, 可同時增一個或多個

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

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

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

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

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

攔截器實現(xiàn)

之所以會有攔截器的需求，是因為我之前所做的一個應(yīng)用的數(shù)據(jù)響應(yīng)格式如下:

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

其中code值會有這樣幾種值:

0 failed

1 success

2 session timeout

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

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

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

我做單頁面應(yīng)用時，會有這樣一個情景:

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

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

結(jié)語

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85252.html

相關(guān)文章

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)

    摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...

    big_cat 評論0 收藏0

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)

    摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...

    Lavender 評論0 收藏0

  • 基于 jQuery Ajax 定制自己喜愛的 API

    摘要：你覺得的怎么樣，想不想定制更適合自己的絲滑。這篇文章基于我之前的的一篇在單頁面中的應(yīng)用整理而來。因此，我基于，重新封裝了一層。內(nèi)容大多會是后端技術(shù)前端工程，偶爾會有一些大數(shù)據(jù)相關(guān)，會推薦一些好玩的東西。希望你會喜歡一切，源于喜歡。 showImg(http://ww1.sinaimg.cn/large/b196a42dgw1f2t2s0fkzoj20fu0643yd.jpg); 你覺得...

    30e8336b8229 評論0 收藏0

  • 一種SPA（單頁面應(yīng)用）架構(gòu)

    摘要：個人認(rèn)為單頁面應(yīng)用的優(yōu)勢相當(dāng)明顯前后端職責(zé)分離，架構(gòu)清晰前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理。上面的這種單頁面應(yīng)用也有其相應(yīng)的一種開發(fā)工作流，當(dāng)然這種工作流也適合非單頁面應(yīng)用進(jìn)行產(chǎn)品功能原型設(shè)計。 未經(jīng)允許，請勿轉(zhuǎn)載。本文同時也發(fā)布在我的博客。 （如果對SPA概念不清楚的同學(xué)可以先自行了解相關(guān)概念） 平時喜歡做點(diǎn)小頁面來玩玩，并且一直采用單頁面應(yīng)用（Single Page Appl...

    Codeing_ls 評論0 收藏0

  • SPA那點(diǎn)事

    摘要：單頁面應(yīng)用的出現(xiàn)依然存在著爭議性，我們該如何看待他的兩面性呢接下來小生給大家總結(jié)一下他的優(yōu)缺點(diǎn)。單頁面應(yīng)用的優(yōu)勢無刷新體驗沒有了令人詬病的頁面頻繁刷新，同時節(jié)約瀏覽器資源，路由響應(yīng)比較及時，提升了用戶的體驗。 前端猿一天不學(xué)習(xí)就沒飯吃了，后端猿三天不學(xué)習(xí)仍舊有白米飯擺于桌前。IT行業(yè)的快速發(fā)展一直在推動著前端技術(shù)棧在不斷地更新?lián)Q代，前端的發(fā)展成了互聯(lián)網(wǎng)時代的一個縮影。而單頁面應(yīng)用的發(fā)展...

    PumpkinDylan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<