内容发布更新时间 : 2024/9/20 7:50:22星期一 下面是文章的全部内容请认真阅读。
react native 实战系列教程之影片数据
获取并解析
fetch介绍
fetch是React Native的一个网络请求库，使用该库不用引入模块，可以直接使用。一个简单的请求如下：
fetch('http://facebook.github.io/react-native/movies.json')
发起请求之后，我们还需要对它的响应进行处理，只要这样
fetch('http://facebook.github.io/react-native/movies.json') .then((response)=>{
console.log(response) } )
.catch((e)=>{
console.log(e) } )
在浏览器中打开调试工具，在Console下输入以上代码：
从上图可以看出fetch返回的数据对象Response包含body、headers、status等。
Response常用的两个函数是
json() - 返回一个JSON格式.
text() - 返回一个文本.
fetch还可以构造复杂一点的
fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: {
'Accept': 'application/json',
'Content-Type': 'application/json', },
body: JSON.stringify({ firstParam: 'yourValue',
secondParam: 'yourOtherValue', }) })
可以配置请求的方法method，头部headers和body。
上面的请求都是异步的，也可以使用同步操作，如下
async getMoviesFromApi() { try {
let response = await fetch('http://facebook.github.io/react-native/movies.json'); let responseJson = await response.json(); return responseJson.movies; } catch(error) {
console.error(error); } }
整个方法是异步的，但是内部的fetch请求是同步的，使用await 会等待fetch返回结果response再执行下一步。记得try catch任何异常。
更多fetch相关，可以查看官方文档
使用fetch获取数据
打开DramaComponent.js文件，定义一个方法fetchData
fetchData(){
var url = 'http://www.y3600.com/hanju/new'; fetch(url)
.then((res)=> res.text()) .then((html)=>{
console.log(html); })
.catch((e)=>{
console.log(e);
}).done(); }
//在最初的render方法调用之后立即调用。
//网络请求、事件订阅等操作可以在这个方法中调用。 //作用相同与Fragment生命周期中的onViewCreate方法。 componentDidMount(){ this.fetchData(); }
这样我们就获取到网页html数据，接下来我们要解析html获取想要的数据。使用到的解析库是cheerio。
使用cheerio解析html获取影视信息
cheerio属于第三方模块，我们要使用它首先要先把它安装到我们的项目中来。
cheerio依赖events模块，所以events也要安装进来。不知道依赖关系也没事，在你运行程序的时候，它就会提示你缺少了哪个module，再安装下就可以了。
使用命令行cd到我们的跟目录下，然后执行命令
npm install cheerio --save
npm install events --save
等待安装完毕之后，在DramaComponent.js中引入该模块
import Cheerio from 'cheerio';
然后将html加载到cheerio解析器里,利用cheerio API进行数据提取，通读cheerio API。
var $ = Cheerio.load(html);
我们要分析提取的网站地址是http://www.y3600.com/hanju/new。打开该网站，右击查看网页源代码，先自己静态分析下，该如何通过html标签获取筛选到数据。
通过分析，我们发现影片列表信息存放在class为m-ddone的div标签下，并且ul的每一li标签代表一部影片,然后继续分析下去获取每一部的详细信息即可，这里就不再详细分析了。我们声明一个方法来解析这一个过程，代码如下：
//解析html
resolveHtml(html){
var $ = Cheerio.load(html);
var body = $('div.m-ddone').find('ul');//ui