如题,最近在做移动端h5的项目,因为需要兼容移动端的各个浏览器,
昨天尝试写了whatwg-fetch一个例子,但是跑在UC里面有些问题,
所以想请问下老司机们,是否有过这方面的经验,或者可以很确定的告诉我UC浏览器支持或者不支持fetch呢.
如题,最近在做移动端h5的项目,因为需要兼容移动端的各个浏览器,
昨天尝试写了whatwg-fetch一个例子,但是跑在UC里面有些问题,
所以想请问下老司机们,是否有过这方面的经验,或者可以很确定的告诉我UC浏览器支持或者不支持fetch呢.
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
鉴于没人给我回答,在我一直坚持不懈的较真的精神下,我搞定了,知道是哪里的问题,并且解决了.
前提:我发现Promise在一些低版本浏览器不支持,所以下了pinkie-promise.并且在页面引入了,这个是前提
1.首先谷歌浏览器下fetch是没问题的,因为是支持fetch的,而UC浏览器是不支持的,如下图,中间太长我截取了上下,自行对齐.
2.开始了我的探索之路,我在谷歌中把fetch() console出来了,打印的结果是 function fetch (){native code},而UC打印如下图:
可以看出这里的代码是后经过封装的xhr的代码,经过一个多小时折腾我还是没定位出来,于是我果断把代码copy出来放到我自己的js函数中了,这样我就可以在代码中alert 那么就可以知道这段代码中走到了哪儿.
过程比较痛苦直接说结果吧,总之请求回来xhr.status是200,接口是成功回来了,接下来我发现走到了如图下划圈中:
alert body 是有值的,所以问题定位了是 resolve 中new Response的问题.
(有了个初步结果我就可以下班了....)
3.经过老大的指点,为何我不去node_module中源码debugger呢,(是啊,我早咋没想到),于是,今早我果断去翻源码了,发现不到500行代码,其中封装了Response,header等,但是,跟我昨晚相反的是,请求根本没有回来200,在经过一番alert,我终于明白了....
4.昨晚把代码copy到我自己的函数中,而我在函数最上方是import了一个Promise,而现在我在fetch的源码中,并没有第三方的Promise存在,所以根本没有走进去过,如下图
为了验证我的思想我把pinkie-promise引入了,注意引入的方式不能用import 因为UC会显示不出来,只能使用require
结论是我是对的,接口在UC中成功的返回了.
5.定位了问题,就要解决问题,两个方案,1)查看bable有没有解决方案,最省事,不用我做什么.2)手动写个文件引入pinkie-promise,判断当前是否有window.Promise,如果没有就把我引入的作为window.Promise.
6.找到了这篇文章http://www.tuicool.com/articl...看到有个lie的Promise库,试着引入
删掉其他多余代码防止干扰,运行,结果,完美!!!
**总结:
以上就是我挣扎的过程,总结起来其实就是Promise在低版本的支持问题,而我早没想到fetch也是有Promise的,所以导致自己走了那么多弯路,后续如果有问题会更上来,以免别人遇到和我一样的问题.**
其实即使解决不了,我也有zepto的 ajax...........
但是我就是想知道为啥..........