Fly拦截全局Ajax请求的方法

大多数情况下，我们的 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于jquery fly插件实现加入购物车抛物线动画效果

    基于jquery fly插件实现加入购物车抛物线动画效果

    先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

  • mpvue中使用flyjs全局拦截的实现代码

    我们安装好flyio之后 npm install flyio 找到src目录下的main.js文件 首先引入flyjs并实例化 var Fly=require("flyio/dist/npm/wx") var fly=new Fly 比方说我们每次请求我们自己的服务器接口的时候需要带上appID,用户登陆后需要带上openId // 请求拦截 fly.interceptors.request.use((request)=>{ request.body.appId = 'xxx'

  • 在小程序/mpvue中使用flyio发起网络请求的方法

    Fly.js 一个基于Promise的.强大的.支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器.微信小程序.Weex.Node.React Native.快应用中都能正常运行.同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere. Flyio Github: https://github.com/wendux/fly 问题 随着 Weex .mpvue 的发布,他们都是支持Vue.js语法.目前v

  • Fly拦截全局Ajax请求的方法

    大多数情况下,我们的 Ajax 请求都是通过前端的开发库.框架发出的,如 jQuery.axios 或者 Fly.这些库自身都会有一些请求/响应钩子,用于预处理 Ajax请求和响应.但是,如果你没有使用这些网络库,又或是你并不是网页的开发者,而你需要分析某个网页的所有Ajax请求,又或是你是一个应用开发者,你的webview中需要拦截所有网页的网络请求(网页并不是你开发的)-- 这种时候,你就需要拦截全局的 Ajax 请求. 原理 无论你的应用是通过那个框架或库发起的 Ajax 请求,最终都会回

  • JS 拦截全局ajax请求实例解析

    你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!

  • AngularJS实现ajax请求的方法

    本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

  • php判断是否为ajax请求的方法

    本文实例讲述了php判断是否为ajax请求的方法.分享给大家供大家参考,具体如下: 先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以使用 $_SERVER["HTTP_X_REQUESTED_WITH"] 来获取.(注意:中划线换成了下划线,不区分大小写) 由此,我们可以这样来判断是否为 ajax 请求: if(isset($_SERV

  • js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

  • jQuery取消ajax请求的方法

    本文实例讲述了jQuery取消ajax请求的方法.分享给大家供大家参考.具体分析如下: 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做的结果仅仅是让浏览器不再监听这个请求的响应,但服务器端仍然会进行处理 var xhr = $.ajax({ type: "POST", url: "test.php", data: "name=test", success: function(msg

  • jQuery实现监控页面所有ajax请求的方法

    本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en&quo

  • php检查是否是ajax请求的方法

    本文实例讲述了php检查是否是ajax请求的方法.分享给大家供大家参考.具体如下: 通过这段代码可以判断用户的请求是否来自AJAX XMLHttpRequest,以区别普通post,get和ajax function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')); } 希望本文所述对大家的php程序

  • jquery中AJAX请求 $.post方法的使用

    jquery中AJAX请求 $.post方法的使用

    使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.$.post方法是jQuery的实用工具方法. post和get发送方式的特点, GET 方法提交数据不安全,数据置于请求行,客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内.POST方法提交的数据置于消息主体内,客户端不可见, POST 方法提交的数据大小没有限制. $.post方法语法 $.post(url,parameters,callback) 参数   url (字符串)服务器端资源地址

  • 实例讲解使用原生JavaScript处理AJAX请求的方法

    Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务

随机推荐