reactnative实战系列教程之影片数据获取并解析.docVIP

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(/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 = /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); 我们要分析提取的网站地址是/hanju/new。打开该网站，右击查看网页源代码，先自己静态分析下，该如何通过