react-native填坑-fetch相关
发布于 1 年前 作者 cctv1005s 3219 次浏览 来自 分享

相关背景

本人学生,最近在做安卓的作业,使用了React-Native进行开发。需要实现的效果是在安卓本地实现爬虫,爬取网页,进行解析。

与在PC端爬取数据是类似的,都是先读取html,在使用工具解析。 我在这里使用的是:

  • 网络: React-Native自带的fetch
  • html解析 : cheerio-without-node-native (由于cheerio部分依赖js在PC上的IO操作,具体是哪部分代码忘了,不能够在安卓端使用,所以需要纯js实现的cheerio,这个包就很好。)

我主要遇到的问题是

在开发过程中,当使用到fetch的json方法或者text方法,有时候就会出现这样的问题.

fetch('http://www.fitnes.cn/jianshen')
.then(res => { return res.blob(); })
.then(blobs => {
  }

遇到的问题

我的解决方法是 查阅了相关资料后,我的解决方法是: 使用axios,axios是封装了XMLHttpRequests ,这个对象在react-native中同样存在,使用axios会比fetch稳定许多。

另外还有一点就是,如果非要使用fetch,注意区分fetch的浏览器方法和react-native中提供的方法。例如blob就是only浏览器提供的方法,在非远程调试模式下,使用也会报上面的错。

在调试模式下能使用很多非react-native的浏览器方法,我猜想这是因为开启远程调试后,浏览器的全局变量对react-native上的变量造成了污染,所以在远程调试中能使用很多浏览器方法,非常神奇!

这个问题的 github issue

可能我说的也有错,欢迎大家指正

3 回复

我一直在用 fetch,没遇到什么问题

关于blob的问题,有个PR https://github.com/facebook/react-native/pull/11573 还没进master,你可以去催一下

关于HTML解析的问题,我用 React Native 开发的 app 牛读 http://reader.liteneo.com/ ,今天刚刚发布v2.0.0 版本 https://cnodejs.org/topic/591e6e13ba8670562a40f2ba 里面的详情页面除了头条之外其他的文章都是直接从网上爬的页面或者调用api拿到html之后解析,然后用React Native体统的组件渲染的

个人严重不推荐使用 cheerio,在移动端性能非常差,我是直接使用的 cheerio 依赖的 htmlparser2,我做过对比,处理时间完全不是在一个等级上,不过 htmlparser2 不能直接用于 React Native,所以我做了点小修改,你可以直接用我的版本 https://github.com/nihgwu/htmlparser2

@nihgwu 学习到了

@nihgwu 其实当初写app的时候就打算参考您的牛读的~可惜没有开源~

回到顶部