开源一款好用的AJAX和FETCH拦截器

Posted 乐爸Hok本人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了开源一款好用的AJAX和FETCH拦截器相关的知识,希望对你有一定的参考价值。

因为手里的一个项目需要获取一个第三方软件的数据,但是他们不提供数据库的直接访问,且其提供的api接口能力有限,于是只好另辟蹊径,通过浏览器扩展插件进行web请求和响应的拦截。

大致思路如下:

通过浏览器扩展插件技术将做了monkey patch的ajax和fetch脚本注入到需要拦截web请求和响应的页面,那么这个页面上的window下原有的XMLHttpRequest和fetch便会被我们修改过的ajax和fetch替代。结果页面上的每个ajax和fetch请求和响应都会先通过我们挂载的拦截器函数的处理,然后在发送出去或者接收回页面。

这个思路是通用的,适用于一切的可以加载chrome扩展的web应用。当然,我想如果App在打包时可以注入用于拦截的javascript到webkit浏览器,也是可以进行web请求拦截的。

开源的代码在我的gitee仓库下。(点这里访问)本项目以MIT许可开放。

这只是解决了ajax,还有fetch的需要处理。这部分只好自己手搓一个了。

核心代码在src\fetch.js中。

使用方式如下:

1. 安装
- 下载这个git仓库。
- 运行 `npm run build`
- 拦截ajax, 需要使用`dist`目录下的`ajaxhook.ming.js`.
```html <script src="dist/ajaxhook.min.js"></script> ```
- 拦截fetch需要使用`dist`下的`fetchhook.ming.js`.
```html <script src="dist/ajaxhook.min.js"></script> ```
2. 使用
- 用`proxy`拦截ajax:
```javascript
ah.proxy({ //请求发起前进入 onRequest: (config, handler) => { console.log(config.url) handler.next(config); }, //请求成功后进入 onResponse: (response, handler) => { console.log(response.response) handler.next(response) }, //请求发生错误时进入,比如超时;注意,不包括http状态码错误,如404仍然会认为请求成功 onError: (err, handler) => { console.log(err.type) handler.next(err) } }) ```
- 用`hookFetch`拦截fetch:
```javascript
fh.hookFetch({ requestInterceptors: { // input is usually url, init is of Request entity. itc1: function (input, init){ .... do something return init }, itc2: function (input, init){ .... do something return init }, }, responseInterceptors: { // input is usually url, interceptorRes is of Response body. itc3: function (input, interceptorRes){ .... do something return interceptorRes }, itc4: function (input, interceptorRes){ .... do something return interceptorRes }, }    })

    欢迎下载ajax-fetch-interceptor使用,也欢迎提交Pull Request。

以上是关于开源一款好用的AJAX和FETCH拦截器的主要内容,如果未能解决你的问题,请参考以下文章

fetch拦截器的实现

massCode 一款优秀的开源代码片段管理器

template.js插件和ajax一起使用的例子

Vue 接口 promise + fetch + axios + async 和 await

Vue 接口 promise + fetch + axios + async 和 await

国人开源了一款超好用的 Redis 客户端,真香!!