React Native网页数据抓取与解析实现

如果你打算用 RN 写某网站的第三方 App，但该网站不提供可以返回 JSON 的接口，这种情况下就需要自己进行页面抓取及解析。

首先，我们需要明确一件事，RN 既不是 browser 也不是 node，这意味着有些 js 库是不能直接拿来用的。

HTTP 请求

RN 提供了 Fetch API 和  XMLHttpRequest API，基于这两个库的二次封装库也是可以用的，比如  frisbee 和 axios，所以在 RN 下进行 HTTP 请求不是什么问题。

HTML 解析

当前，最好用的 js html parser 应属 cheerio，是否可以在 RN 使用呢？让我们试试。

首先，安装 cherrio（注意，一定是要 v0.22.0，后面解释）：

使用：

很不幸，出现了错误：

这是因为 cheerio 的依赖 htmlparser2 依赖一些 node 内置的库。不过这是可以被解决的，理论上，只要这些依赖库不依赖更底层的接口，那么就可以通过 npm 安装上这些依赖：

再次刷新，我们发现 cheerio 已经可以正常使用了！

其实这个问题有在 cheerio 的 issues 上讨论过：https://github.com/cheeriojs/cheerio/issues/1058。有人为了解决这个问题弄了另外一个库 cheerio-without-node-native，然而这种做法不仅没有必要而且非常糟糕，因为这个分裂出去的版本的质量是难以保证的。作者的观点是：

You can install the missing packages from npm (events, stream and utils afaict) and they will be automatically picked up.

I would not recommend the usage of a fork as it will make it difficult to track down issues and will delay, if not prevent, patches for bugs.

至于为什么只能用 cheerio@0.22.0，是因为之后的版本，cheerio 引入了 parse5，而 parse5 依赖 stream.Writable，npm 安装的 stream 并不提供。

测试

由于网页随时可能发生变化，测试就显得尤为重要。这里我以一段获取简书用户数据的代码为例，做一个简单的黑箱测试。

为了能在 node 环境下使用 fetch，需要安装 node-fetch。RN 已经默认安装了 jest，我们就用它来测试吧：

运行测试：

另一种获取网页数据的黑科技

除了传统的 HTML 请求解析，在某些情况下我们还可以用类似 PhantomJS 的方案，优点是可以很好地避开一些限制，降低解析难度。RN 里当然用不了 PhantomJS，但我们有 WebView，可以通过 injectedJavaScript 注入 js，用 postMessage 回传数据，比如这段用于获取页面中视频链接的代码：

PS. 慎用该方法，首先是 WebView 消耗资源太大，其次是难以测试，缺乏稳定性。

本文转载自异步社区

原文链接：https://www.epubit.com/articleDetails?id=N1a72cc96-b1bb-45a1-8650-9aaf79c17197