使用飞怎么拦截全局Ajax请求 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关使用飞怎么拦截全局Ajax请求,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>原理

无论你的应用是通过那个框架或库发起的Ajax请求,最终都会回归到XMLHttpRequest,所以,拦截的本质就是替换浏览器原生的XMLHttpRequest。具体就是,在替换之前保存先保存XMLHttpRequest,然后在请求过程中根据具体业务逻辑决定是否需要发起网络请求,如果需要,再创建真正的XMLHttpRequest实例。

<强>飞拦截全局Ajax

如果您还不了解飞,请参考其官网:https://wendux.github。io/dist/#/doc/flyio/readme

我们知道,在飞行中,XMLHttpRequest就是一个http引擎,所以我们要拦截,只需要自定义一个引擎替换掉全局的XMLHttpRequest就行,而飞提供了快速生成引擎的工具,所以我们可以很方便实现拦截。

我们先看一个简单的例子,功能是输出每次网络请求url和方法。

<强>实现

, var log =, console.log;//切换fly 引擎为真正的XMLHttpRequest 　　时间=fly.engine XMLHttpRequest; 　　var engine =, EngineWrapper (function (请求,,responseCallback), { 　　console.log才能(request.url, request.method)//发才能起真正的ajax请求　　fly.request才能(request.url, request.data,,请求) 　　,,,不要犹豫(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 发动机; 　　axios.post (“. ./package.json")(日志)

我们用axios发起一个请求测试一下:

axios.post (“. ./package.json")(日志)//控制台输出　　祝辞,http://localhost: 63341/飞/package.json 职位　　祝辞,{数据:{…},,状态:,200年,statusText:,“OK",,头:,{…},,配置:,{…},,…}

可以看到控制台中输出了请求的url和方法,我们的拦截成功了。而第二行的结果对象是axios然后打印出的。

因为飞支持切换发动机,我们可以直接先将发动机飞切换为真正的XMLHttpRequest,然后再覆盖,这样中飞行的网络请求都是通过真正的XMLHttpRequest发起的(事实上,浏览器环境下飞默认的引擎本就是XMLHttpRequest,无需手动切换,此处为了清晰,故手动切换了一下).fly会根据请求对象自动同步请求头。如果想阻止请求,直接在适配器中返回即可。

其它拦截方法
Github上的开源库Ajax-hook也可以拦截全局的的ajax请求,不同的是,它可以拦截ajax请求的每一步,每一个回调,不仅强大,而且也很轻量(1 kb)和上面通过飞行引擎拦截的方式相比,Ajax-hook的拦截粒度更细,但Ajax-hook由于使用了ES5的getter、setter,所以不支持IE9以下的浏览器。

以上就是使用飞怎么拦截全局ajax请求,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。