国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Js 攔截全局ajax請求

plokmju88 / 539人閱讀

摘要:卸載攔截卸載后,攔截將失效。最后測一下輸出注意攔截函數返回值是一個,如果為則會阻斷請求,默認為不會阻斷請求。

你是否有過下面的需求:需要給所有ajax請求添加統一簽名、需要統計某個接口被請求的次數、需要限制http請求的方法必須為get或post、需要分析別人網絡協議等等,那么如何做?想想,如果能夠攔截所有ajax請求,那么問題就會變的很簡單!?,少年,想法有點大膽,不過,我欣賞!直接上輪子,Ajax-hook不僅可以滿足你想要的,同時可以給你更多。

本博客原始地址:http://www.jianshu.com/p/9b634f1c9615
Ajax-hook源碼地址 : https://github.com/wendux/Ajax-hook 歡迎star

如何使用 一. 直接引入腳本

引入ajaxhook.js

攔截需要的ajax 回調或函數。

hookAjax({
    //攔截回調
    onreadystatechange:function(xhr){
        console.log("onreadystatechange called: %O",xhr)
    },
    onload:function(xhr){
        console.log("onload called: %O",xhr)
    },
    //攔截函數
    open:function(arg){
     console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
    }
})

ok, 我們使用jQuery(v3.1) 的get方法來測一下:

// get current page source code 
$.get().done(function(d){
    console.log(d.substr(0,30)+"...")
})

結果 :

> open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
> onload called: XMLHttpRequest
> 
  
  

攔截成功了! 我們也可以看到jQuery3.1內部已經放棄onreadystatechange而改用onload了。

二. CommonJs下的模塊構建工具環境中

假設在webpack下,第一步, 安裝ajax-hook npm插件

npm install ajax-hook --save-dev

第二步,引入模塊并調用api:

const ah=require("ajax-hook")
ah.hookAjax({ 
  onreadystatechange:function(xhr){ ... },
  onload:function(xhr){ ... }, 
  ...
})
...
ah.unHookAjax()
API hookAjax(ob)

ob,類型是對象,key為想要攔截的回調或函數,value為我們的攔截函數。

返回值: 原始的 XMLHttpRequest。如果有寫請求不想被攔截,可以new 這個。

unHookAjax()

卸載攔截;卸載后,攔截將失效。

改變ajax行為

攔截所有ajax請求,檢測請求method,如果是“GET”,則中斷請求并給出提示

hookAjax({
  open:function(arg){
    if(arg[0]=="GET"){
      console.log("Request was aborted! method must be post! ")
      return true;
    }
  } 
 })

攔截所有ajax請求,請求統一添加時間戳

hookAjax({
  open:function(arg){
    arg[1]+="?timestamp="+Date.now();
  } 
 })

修改請求返回的數據“responseText”

hookAjax({
   onload:function(xhr){
    //請求到的數據首部添加"hook!" 
    xhr.responseText="hook!"+xhr.responseText;
   }
 })

結果:

hook!


有了這些示例,相信開篇提到的需求都很容易實現。最后測一下unHook

   hookAjax({
        onreadystatechange:function(xhr){
            console.log("onreadystatechange called: %O",xhr)
            //return true

        },
        onload:function(xhr){
            console.log("onload called")
            xhr.responseText="hook"+xhr.responseText;
            //return true;
        },
        open:function(arg){
          console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
          arg[1]+="?hook_tag=1";

        },
        send:function(arg){
         console.log("send called: %O",arg[0])
        }
    })

    $.get().done(function(d){
        console.log(d.substr(0,30)+"...")
        //use original XMLHttpRequest
        console.log("unhook")
        unHookAjax()
        $.get().done(function(d){
            console.log(d.substr(0,10))
        })

    })

輸出:

open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
send called: null
onload called
hook


注意

攔截函數返回值是一個boolean,如果為true則會阻斷ajax請求,默認為false,不會阻斷請求。

所有的回調攔截函數的參數為當前的XMLHttpRequest 實例,如onreadystatechange、onload;所有ajax原始方法的攔截函數會將原始參數以數組的形式傳遞給攔截函數,你可以在攔截函數中修改它。

相關鏈接:
Ajax-hook原理解析:http://www.jianshu.com/p/7337ac624b8e

BY THE WAY : 歡迎關注、star我的另一個開源項目 fly.js ! ?。

最后還是老話:剛開博客,求贊、求關注、求評論、各種求。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90073.html

相關文章

  • http.jsAjax單頁面中的應用

    摘要:發送全局參數我做單頁面應用時,會有這樣一個情景當用戶登錄后,服務器會返回一個值,之后的大部分請求都需要傳遞這個參數。因此,我在中增加這樣一個函數來解決上面的問題。 關于作者 馬隆博(Lenbo Ma),Java,Javascript Blog: http://mlongbo.com E-Mail: mlongbo@gmail.com 文章編寫于: 2014/08/10 轉載請注明出...

    DC_er 評論0 收藏0
  • 淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

    摘要:其實就是我們開始掛載上去的我們在這里出去,我們就可以在回調里面只處理我們的業務邏輯,而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業務的不斷累積,目前我們 ToC 端主要項目,除去 node_modules, bu...

    rickchen 評論0 收藏0
  • 淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

    摘要:其實就是我們開始掛載上去的我們在這里出去,我們就可以在回調里面只處理我們的業務邏輯,而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業務的不斷累積,目前我們 ToC 端主要項目,除去 node_modules, bu...

    Backache 評論0 收藏0
  • JS HTTP 請求終極解決方案 - fly.js

    摘要:支持請求響應攔截器。定位與目標的定位是成為請求的終極解決方案。攔截器支持請求響應攔截器,可以通過它在請求發起之前和收到響應數據之后做一些預處理。 Fly.js 是一個功能強大的輕量級的javascript http請求庫,同時支持瀏覽器和node環境,通過適配器,它可以運行在任何具有網絡能力的javascript運行環境;同時fly.js有一些高級的玩法如全局ajax攔截、在web a...

    OpenDigg 評論0 收藏0
  • JS實現監控微信小程序

    摘要:博客地址使用模塊化工具打包自己開發的庫文章中有提到,當時需要寫一個,監控小程序的后臺接口調用和頁面報錯,今天就來說下實現原理吧原理之前也做過瀏覽器端的數據埋點上報,其實原理大同小異通過劫持原始方法,獲取需要上報的數據,最后再執行原始方法,這 博客地址 《使用模塊化工具打包自己開發的JS庫》文章中有提到,當時需要寫一個SDK,監控小程序的后臺接口調用和頁面報錯,今天就來說下實現原理吧! ...

    Cheriselalala 評論0 收藏0

發表評論

0條評論

plokmju88

|高級講師

TA的文章

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