前言

很多情况下咱们在做浏览器插件的时候需要拿fetch的返回数据而不影响功能正常操作。

原理

hook原理咱就不讲了,跟其他hook差不多。具体来看看如何实现返回的。

用过fetch的朋友应该都知道response.body只能读一下,那么如何在影响功能的情况下获取数据呢?

咱们想一下是不是可以克隆一个返回的body数据出来呢,不影响原数据的情况下。

通过博主的实现发现使用Object.assign是无法克隆的。

细心的小伙伴应该发现了body数据返回的类型是ReadableStream,只读流。

那么我们是否可以通过new ReadableStream来实现读取返回数据而不影响后续功能呢?

最终原理吗,就是通过把原fetch的response数据拦截了,然后返回一个新的未更改的response对象。

最终代码放结尾。

文档https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream

代码

咱们先看一下下面这段代码

  1. window.au_fetch=window.fetch;
  2. window.fetch=function(url){
  3. return window.au_fetch.apply(window,arguments).then((response) => {
  4. const reader = response.body.getReader();
  5. const stream = new ReadableStream({
  6. start(controller) {
  7. function push() {
  8. // "done"是一个布尔型,"value"是一个Unit8Array
  9. reader.read().then((e) => {
  10. let { done, value }=e;
  11. // 判断是否还有可读的数据?
  12. console.log(done,new TextDecoder("utf-8").decode(value));
  13. if (done) {
  14. // 告诉浏览器已经结束数据发送
  15. controller.close();
  16. return;
  17. }
  18. // 取得数据并将它通过controller发送给浏览器
  19. controller.enqueue(value);
  20. push();
  21. });
  22. }
  23. push();
  24. }
  25. });
  26. let ret=new Response(stream, { headers: { "Content-Type": "text/html" } })
  27. console.log(stream,ret);
  28. return ret;
  29. });
  30. };

原文地址:https://blog.1zyan.cn/1049.html

js通过hook拿fetch返回数据的更多相关文章

  1. js Fetch返回数据res.json()报错问题

    前言 一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了 ...

  2. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  3. js进阶 14-3 如何接收load函数从后台接收到的返回数据

    js进阶 14-3 如何接收load函数从后台接收到的返回数据 一.总结 一句话总结:load方法的回调函数的参数即可接收从后台的返回数据. 1.load方法的回调函数的参数是什么? 语法:load( ...

  4. js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可)

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  5. 关于Node.js中HTTP请求返回数据需要JSON解析的问题

    在编写项目过程中,需要用到实时数据的推送需求, 所以首先想到了NodeJS的websocket模块 在网上找了一个聊天室的例子  然后将其改为自己需求的推送 其中遇到的问题 返回数据问题  :   由 ...

  6. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  7. C#串口通信—向串口发送数据,同步接收返回数据

    最近写C#串口通信程序,系统是B/S架构.SerialPort类有一个DataReceived事件,用来接收串口返回的数据,但这种方式在C/S架构下很好用,但B/S就不好处理了.所以写了一个同步模式接 ...

  8. 【spring 后台跳转前台】使用ajax访问的后台,后台正常执行,返回数据,但是不能进入前台的ajax回调函数中

    问题: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示:  问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...

  9. Js C# 实现跨域访问数据

    使用项目一的js调用项目二的数据 1.项目一 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta ...

  10. Java抓取网页数据(原网页+Javascript返回数据)

    有时候由于种种原因,我们需要采集某个网站的数据,但由于不同网站对数据的显示方式略有不同! 本文就用Java给大家演示如何抓取网站的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数 ...

随机推荐

  1. 巧用视觉障眼法,还原 3D 文字特效

    最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特别好实现,但是,如果仅仅只 ...

  2. 自研ORM Include拆分查询(递归算法 支持无限层级) 性能优化探讨

    最近我在优化 Include 拆分查询,贴出源码供大家交流探讨是否还有优化空间. 测试代码 1 Console.WriteLine($"总记录数:{db.Query<Category& ...

  3. [Leetcode]设计链表

    题目 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链表,则还需要一 ...

  4. 浅谈RMQ问题

    RMQ:question 有一个长度为 N N N的数组,数组中的数是无序的( 1 < = n < = 5 ∗ 1 0 5 1<=n<=5*10^5 1<=n<=5 ...

  5. 常用的SQL命令:

    丢弃指定的数据库,如果存在的话 DROP DATABASE IF EXISTS xuezi; 创建新的数据库 CREATE DATABASE xuezi; 进入数据库xuezi     USE xue ...

  6. postgresql添加mysql_fdw测试过程

    请先确认已经安装好mysql_fdw,如果没有配置好点这:https://www.cnblogs.com/ohsolong/p/13041989.html 1.切换至postgres用户,输入密码登录 ...

  7. 从历代GC算法角度刨析ZGC

    作者:京东科技 文涛 前言 本文所有介绍仅限于HotSpot虚拟机, 本文先介绍了垃圾回收的必要手段,基于这些手段讲解了历代垃圾回收算法是如何工作的, 每一种算法不会讲的特别详细,只为读者从算法角度理 ...

  8. 亲测有效! Studio One 6 V6.0.1 音乐编曲工具 含win/mac版

    亲测有效! Studio One 6 V6.0.1 音乐编曲工具  含win/mac版 记录.生产.混合.掌握和执行所有操作.从工作室到舞台,Studio One6以易用为核心,是您的创意合作伙伴.当 ...

  9. 企业级GitLab在Docker部署使用

    一.部署gitlab 这里使用的是Centos8,安装Docker环境 ,这里不说了,参考:https://www.cnblogs.com/wei325/p/15139701.html gitlab有 ...

  10. 【TS】函数和函数类型

    在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型. 函数类型分为两个方面: 1.函数参数 2.函数返回值 语法: function 函数名( 参数 : 参数类型 ...