美文网首页
React-Native之网络数据请求|白话RN

React-Native之网络数据请求|白话RN

作者: Tanyfi | 来源:发表于2016-09-12 17:51 被阅读537次
网络请求一直都是很重要又很难得一部分, 只要和网络挂钩的都比较复杂,相对于iOS的网络请求,RN的网络数据该如何请求来呢?

一般RN常用的是fetch(){}函数来请求数据, (PS:个人理解:😁取一层存到一个参数,剥离到最后我们需要的存到对应数组)

  • 有关网络处理'定时器处理等复杂操作要放到componentDidMount(){ }这个方法里面写
// 请求网络数据
  componentDidMount(){   
      this.loadDataFromNet();//内部调用网络请求的具体操作
  },
  • 网络请求部分的链接是固定的, 固定的参数在getDefaultProps(){}这个方法里面初始化
getDefaultProps(){   //
return {      
     url_api:"http://c1.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&fn=2&passport=&devId=nTM86EPlcxZu09VdpTEh6aR3%2B%2FQX6x8vHBD3ne3k5bbgOrg%2FIP5DcguSDmtYyWbs&size=20&version=8.1&spever=false&net=wifi&lat=5OtqEKiivwW4K%2BGMt6DBdA%3D%3D&lon=jKlRVyYkSNti2wwsjGQHrw%3D%3D&ts=1463384311&sign=TtD7IZllDljVzBs2E4sa9fQyKTKF021w2EUC6qx1gEN48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore",     
     key_word: 'T1348647853363'   
}},
loadDataFromNet(){    
    fetch(this.props.url_api)       //初始化url
       .then((response)=>response.json())   //把请求到的数据转换为我们熟悉的JSON     ,转换到responseData里面
       .then((responseData)=>{            
// 拿到所有的数据           
        var jsonData = responseData[this.props.key_word];   //通过具体的KEY 取出数据         
// 处理网络数据           
        this.dealWithData(jsonData);        
})        
 .catch((error)=>{ //这一步是为了处理异常情况的(如断网),数据没有就从本地请求,前提你在本地要有这个数据,一般做法是自己建一个JS文件把一些json数据放进去,在加载
       if(error){               
 // 拿到所有的数据                
           var jsonData = LocalData[this.props.key_word];                
// 特殊处理                
           this.dealWithData(jsonData)     //调用下面截图的方法       
 }        
})},
具体的数据请求操作.png

相关文章

网友评论

      本文标题:React-Native之网络数据请求|白话RN

      本文链接:https://www.haomeiwen.com/subject/lzipettx.html