移动端UC浏览器是否fetch?

如题,最近在做移动端h5的项目,因为需要兼容移动端的各个浏览器,
昨天尝试写了whatwg-fetch一个例子,但是跑在UC里面有些问题,
所以想请问下老司机们,是否有过这方面的经验,或者可以很确定的告诉我UC浏览器支持或者不支持fetch呢.

阅读 9.3k
2 个回答

鉴于没人给我回答,在我一直坚持不懈的较真的精神下,我搞定了,知道是哪里的问题,并且解决了.

前提:我发现Promise在一些低版本浏览器不支持,所以下了pinkie-promise.并且在页面引入了,这个是前提

clipboard.png

1.首先谷歌浏览器下fetch是没问题的,因为是支持fetch的,而UC浏览器是不支持的,如下图,中间太长我截取了上下,自行对齐.

clipboard.png

clipboard.png

2.开始了我的探索之路,我在谷歌中把fetch() console出来了,打印的结果是 function fetch (){native code},而UC打印如下图:

clipboard.png

可以看出这里的代码是后经过封装的xhr的代码,经过一个多小时折腾我还是没定位出来,于是我果断把代码copy出来放到我自己的js函数中了,这样我就可以在代码中alert 那么就可以知道这段代码中走到了哪儿.
过程比较痛苦直接说结果吧,总之请求回来xhr.status是200,接口是成功回来了,接下来我发现走到了如图下划圈中:

clipboard.png
alert body 是有值的,所以问题定位了是 resolve 中new Response的问题.

clipboard.png

(有了个初步结果我就可以下班了....)

3.经过老大的指点,为何我不去node_module中源码debugger呢,(是啊,我早咋没想到),于是,今早我果断去翻源码了,发现不到500行代码,其中封装了Response,header等,但是,跟我昨晚相反的是,请求根本没有回来200,在经过一番alert,我终于明白了....

4.昨晚把代码copy到我自己的函数中,而我在函数最上方是import了一个Promise,而现在我在fetch的源码中,并没有第三方的Promise存在,所以根本没有走进去过,如下图

clipboard.png

为了验证我的思想我把pinkie-promise引入了,注意引入的方式不能用import 因为UC会显示不出来,只能使用require

clipboard.png
结论是我是对的,接口在UC中成功的返回了.

5.定位了问题,就要解决问题,两个方案,1)查看bable有没有解决方案,最省事,不用我做什么.2)手动写个文件引入pinkie-promise,判断当前是否有window.Promise,如果没有就把我引入的作为window.Promise.

6.找到了这篇文章http://www.tuicool.com/articl...看到有个lie的Promise库,试着引入

clipboard.png

删掉其他多余代码防止干扰,运行,结果,完美!!!

**总结:
以上就是我挣扎的过程,总结起来其实就是Promise在低版本的支持问题,而我早没想到fetch也是有Promise的,所以导致自己走了那么多弯路,后续如果有问题会更上来,以免别人遇到和我一样的问题.**

其实即使解决不了,我也有zepto的 ajax...........

但是我就是想知道为啥..........

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题