大部分状况下,大家的 Ajax 请求全是根据前端开发的开发设计库、架构传出的,如 jQuery、axios 或是 Fly。这种库本身都是会有一些请求/回应勾子,用以预备处理 ajax请求和回应。可是,假如你沒有应用这种网络库,又或者你并并不是网页页面的开发人员,但你必须剖析某一网页页面的全部Ajax请求,又或者你是一个运用开发人员,你的webview中必须拦截所有网站的网络请求(网页页面并不是你开发设计的)…… 这类情况下,你也就必须拦截全局的 Ajax 请求.

基本原理

不管你的运用是根据哪个架构或库发起的 Ajax 请求,最后都是会重归到 XMLHttpRequest 。 因此,拦截的实质便是更换电脑浏览器原生态的 XMLHttpRequest 。实际便是,在更换以前储存先储存 XMLHttpRequest,随后在请求全过程中依据实际领域模型决策是不是必须发起网络请求,假如必须,再建立真实的 XMLHttpRequest 案例。

Fly 拦截全局ajax

假如您还不掌握 fly, 请参照其官方网站:https://wendux.github.io/dist/#/doc/flyio/readme

我们知道,在 Fly 中,XMLHttpRequest 便是一个http engine。因此我们要拦截,只必须自定一个engine更换掉全局的XMLHttpRequest 就可以了,而 Fly 出示了迅速转化成 engine 的专用工具,因此我们可以很便捷完成拦截。

大家首先看一个简易的事例,作用是輸出每一次网络请求 url 和 method。

完成

 var log = console.log;
//转换fly engine为真实的XMLHttpRequest
fly.engine = XMLHttpRequest;
var engine = EngineWrapper(function (request, responseCallback) {
  console.log(request.url, request.method)
  //发起真实的ajax请求
  fly.request(request.url, request.data, request)
    .then(function (d) {
      responseCallback({
        statusCode: d.engine.status,
        responseText: d.engine.responseText,
        statusMessage: d.engine.statusText
      })
    })
    .catch(function (err) {
      responseCallback({
        statusCode:err.status,
        statusMessage:err.message
      })
    })
})
//遮盖默认设置
XMLHttpRequest = engine;
axios.post("../package.json").then(log)

大家用 axios 发起一个请求测试一下:

axios.post("../package.json").then(log)

//控制面板輸出
> http://localhost:63341/Fly/package.json POST
> {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

能够 见到控制面板中輸出了请求的 url 和 method,大家的拦截成功了。而 第二行的結果目标是axios then复印出的。

由于 Fly适用转换engine, 我们可以立即先将 fly engine 转换为真实的 XMLHttpRequest ,随后再遮盖,那样fly中的网络请求全是根据真实的 XMLHttpRequest 发起的 (实际上, 电脑浏览器自然环境下 fly 默认设置的 engine本便是 XMLHttpRequest,不用手动式转换,这里为了更好地清楚,故手动式转换了一下)。fly 会依据request目标自动同步请求头。假如想阻拦请求,立即在 adapter 中 return 就可以。

其他拦截方式
Github上的开源系统库 Ajax-hook 还可以拦截全局的的ajax请求,不一样的是,它能够 拦截ajax请求的每一步,每一个回调函数,不但强劲,并且也很轻巧(1KB)。和上边根据 fly engine 拦截的方法对比 ,Ajax-hook的拦截粒度分布更准,但Ajax-hook因为应用了ES5的 getter、setter,因此不兼容IE9下列的电脑浏览器。

最终

Fly不久开源系统,如果你觉得对您有效,热烈欢迎star,谢谢适用 github: https://github.com/wendux/fly

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用。