fetch ios低版本兼容cannot clone a disturbed response
报错信息
ios 11以下 cannot clone a disturbed response
问题发生场景
- 使用了一个或者多个三方库
- 三方库或者自己的业务代码重写了fetch
- ios11以下
核心原因 ios低版本兼容问题,fetch的原始响应clone一次解析后,不能再次clone(浏览器报错信息:cannot clone a disturbed response)
我们使用fetch的响应的时候,如果直接通过方法解析2次,第二次就会报错 body stream already read
fetch("/").then(res=>{
res.text().then((r)=>{console.log(r)})
res.text().then((r)=>{console.log(r)})
});
所以一般会使用clone,如下的写法。这样的写法有兼容问题,ios11以下会报错: cannot clone a disturbed response
fetch("/").then(res=>{
res.clone().text().then((r)=>{console.log(r)})
res.clone().text().then((r)=>{console.log(r)})
});
这个时候有同学会问了,谁会这样写啊,一般解析一次就够了,干嘛解析两次。如果使用了三方库就会出现这种问题,一般三方库会重写fetch的。三方库可能是请求库(axois、umi-request),也可能是调试库(eduda、vconsole),等等。三方库,会重写fetch,为了拦截API写点自己需要的代码,大概是下面这样的:
// 三方库重写fetch代码
const originFetch = fetch;
fetch = function(){
// do some
return originFetch
.apply(this, arguments)
.then((res) => {
// do some
res.clone().text().then((data) => {
// do some
})
return res
})
}
// 业务代码
fetch('/').then(res=>{
res.clone().text()
})
如上代码,返回的 res 已经被三方库 clone 过了,如果再次 clone 便会出现ios11以下的兼容报错。所以我们的业务代码会直接报错,拿不到任何响应。
三方库分析
umi/request
umi/request,发现了这个问题,并且做了代码的处理. ( github.com/umijs/umi-r… )
从目前的代码看起来,这个解决方案只是解决了它内部使用的问题,而且它返回的数据并不是fetch的原始响应,而是它解析后的接口结果。
现在假如我们在umi/request之后,再实例化使用vconsle,或者eruda,这两个库会重写fetch。两个库同时存在的时候,res.clone 就会触发开始说的ios低版本问题。
vconsole
下面这段是vconsole的fetch代码
eruda
几乎大多的库都如上面,fetch返回的原始响应在库内部被clone过后,原始响应再流转下去。流转下去以后其他的三方库或者业务代码,执行clone便会触发ios11以下的兼容问题。就像是执行了下面的代码一样。
fetch("/").then(res=>{
// 第一次clone
res.clone().text().then((r)=>{console.log(r)})
return res
}).then(res=>{
// 第二次clone
res.clone().text().then((r)=>{console.log(r)})
});
解决方案
如果业务代码使用原生fetch只会解析一次fetch响应,可以忽略因为不会触发两次clone。 作为三方库的开发者,应该知道有这样的兼容问题,下面的写法ios11以下也不会有问题。
fetch("/").then(res=>{
// 第一次clone
const C1 = res.clone();
const C2 = res.clone();
C1.clone().text().then((r)=>{console.log(r)})
C2.clone().text().then((r)=>{console.log(r)})
})
// else
fetch("/").then(res=>{
// 第一次clone
const C1 = res.clone();
C1.clone().text().then((r)=>{console.log(r)})
C1.clone().text().then((r)=>{console.log(r)})
})
// else...
理一下关系
会出兼容性问题的写法图示
解决方案图示
我们多clone一级,就能解决这个问题,这和clone本身的意义实际有出处。ios11以下的这个兼容问题,应该是以前的bug,这个bug在ios11以后才修复,总之现在这样就能解决问题。
解决方案已经明确了,三方库推荐如下方式修改clone方法。
const originFetch = fetch;
fetch = function(){
// do some
return originFetch
.apply(this, arguments)
.then((res) => {
const copyClone = res.clone();
// do some
copyClone.clone().text().then((data) => {
// do some
})
return copyClone.clone()
})
}
如果同时引入多个三方库,其中一个已经按照下面写法解决了兼容性问题,一个还没有解决,可以让解决了兼容的库先执行,也能保证运行正常。
同时还发现,ios11以下,fetch finally方法undefined,不能使用finally方法
ps: 水印就不去了,先在掘金编辑的,拷贝过来多平台发布,本文章为原创文。
fetch ios低版本兼容cannot clone a disturbed response的更多相关文章
- Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat
extends:http://www.cnblogs.com/tianzhijiexian/p/4087917.html 本文是对API中的方法做了介绍,如果想要看如何让这些方法兼容4.x或2.x可以 ...
- Material Designer的低版本兼容实现(一)—— 简介 & 目录
很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,熬夜熬的身体也不是很好了.所以就偷懒没写东西,这回开的这个系列文章是讲如何将Material Designer在 ...
- IE低版本兼容的感悟
2017-04-09 曾经折磨一代人的兼容问题,如今也在同样折磨着我们,明明可以做JS判断来避免对ie低版本的兼容,但是却还是耐心的做着兼容,你可能会问这是为什么, 我们调的不是兼容,是整整一代人的情 ...
- Material Designer的低版本兼容实现(二)—— Theme
Theme material主题可以定义为如下形式: @android:style/Theme.Material @android:style/Theme.Material.Light @androi ...
- javascript原生bind方法ie低版本兼容详解
上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...
- Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton
ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...
- es6语法在ios低版本的支持性
let.const.箭头函数在ios的某些版本不支持,会引起报错 参考:https://blog.csdn.net/cx091/article/details/79805369 https://can ...
- Material Designer的低版本兼容实现(十二)—— Slider or SeekBar
Slider,我更喜欢叫他SeekBar,其实是一个东西啦,就是拖动条.5.0的拖动条和4.x上的HOLO风格完全不同,平添了一些精致.此外还加入了数值指示器,让用户在滑动的时候就能知道现在到了什么位 ...
- Material Designer的低版本兼容实现(十一)—— Switch
5.0中的switch和之前完全不同了,漂亮不漂亮咱们另说,总之4.x上是没有这样的效果了.实现方式有两种,一种是用这个兼容包来做类似的效果,一种是用传统的checkbox来代替.我感觉兼容包的效果是 ...
随机推荐
- Intouch/ifix语音报警系统制作(2)
在我的先前一篇关于语音报警系统制作的文章中,阐述了如何通过标签组来获得@name@的详细内容,以通过这种方式来进行详细的设备故障播报.经过一段时间的试运行,发现使用标签组的方式会产生较大的耦合,(即当 ...
- Calcite(一):javacc语法框架及使用
是一个动态数据管理框架. 它包含许多组成典型数据库管理系统的部分,但省略了存储原语.它提供了行业标准的SQL解析器和验证器,具有可插入规则和成本函数的可自定义优化器,逻辑和物理代数运算符,从SQL到代 ...
- 并发编程——Java线程的6种状态及切换
前言 本次主要分享一下Java线程的六种状态及其转换. 如果对于线程的创建方式不太了解,推荐观看并发编程--认识java里的线程 线程的状态及其转换 操作系统线程的五种状态 新建(NEW) 就绪(RU ...
- Java架构师-十项全能学习笔记(1)
Java架构师-十项全能学习笔记(1) @Configuration @EnableStateMachine public class OrderStateMachineConfig extends ...
- JUC学习笔记(一)
1.什么是 JUC 1.1.JUC简介 在 Java 中,线程部分是一个重点,本篇文章说的 JUC 也是关于线程的.JUC 就是 java.util .concurrent 工具包的简称.这是一个处理 ...
- Java面向对象08——继承
继承 package oop.demon01.demon05; // Person 人 ---- 父类 public class Person { //public //prot ...
- JavaGUI画笔工具的使用
JavaGUI画笔工具的使用 package GUI; import java.awt.*; public class TestPaint { public static void main(Stri ...
- Spring Cloud Alibaba - Spring Cloud Stream 整合 RocketMQ
Spring Cloud Stream 简介 在微服务的开发过程中,可能会经常用到消息中间件,通过消息中间件在服务与服务之间传递消息,不管你使用的是哪款消息中间件,比如RabbitMQ.Kafka和R ...
- Eclipse带参数调试的方法
下面是体现带参数调试的一个代码demo,首先输出参数的数量,然后依次输出每个参数. public class ArgsEx { public static void main(String[] arg ...
- git config 配置简写命令
在多人协作开发时,一般用git来进行代码管理. git有一些命令如:git pull . git push等等,这些命令可以设置alias,也就是缩写. 如:git pull 是 git pl, gi ...