React Native中的网络请求fetch和简单封装

React Native中的网络请求fetch使用方法最为简单，但却可以实现大多数的网络请求，需要了解更多的可以访问：

https://segmentfault.com/a/1190000003810652

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

/**   * Sample React Native App   * https://github.com/facebook/react-native   * 周少停 2016-09-28   * fetch请求数据 header 参数 response转json 请求方式   */     import  React, {Component} from  'react' ; import  {      AppRegistry,      StyleSheet,      Text,      View,      TouchableOpacity } from  'react-native' ;   var  Project = React.createClass({      render() {          return  (              <View style={styles.container}>                  <TouchableOpacity onPress={ this .ssss}>                      <Text>访问</Text>                  </TouchableOpacity>              </View>          );      },      ssss(){          fetch( 'http://www.pintasty.cn/home/homedynamic' , {              method:  'POST' ,              headers: {  //header                  'token' :  'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'              },              body: JSON.stringify({  //参数                  'start' :  '0' ,                  'limit' :  '20' ,                  'isNeedCategory' :  true ,                  'lastRefreshTime' :  '2016-09-25 09:45:12'              })          })              .then((response) => response.json())  //把response转为json              .then((responseData) => {  // 上面的转好的json                      alert(responseData); /                  // console.log(responseData);              })              . catch ((error)=> {                  alert( '错误了' );              })      } });   const styles = StyleSheet.create({      container: {          flex: 1,          justifyContent:  'center' ,          alignItems:  'center' ,          backgroundColor:  '#F5FCFF'      } });   AppRegistry.registerComponent( 'Project' , () => Project);

fetch是人家已经封装好,再度封装只是基于自己项目进行的封装,这里只是基于公司项目实现一下,讲解一下回调:

封装实现:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

/**   * NetUitl 网络请求的实现   * https://github.com/facebook/react-native   */ import  React, { Component } from  'react' ; import  {      AppRegistry,      StyleSheet,      Text,      View,      ListView,      Image,      TouchableOpacity,      Platform,      AsyncStorage } from  'react-native' ;   class  NetUitl  extends  React.Component{      /*       *  get请求       *  url:请求地址       *  data:参数       *  callback:回调函数       * */      static  get(url,params,callback){          if  (params) {              let  paramsArray = [];              //拼接参数              Object.keys(params).forEach(key => paramsArray.push(key +  '='  + params[key]))              if  (url.search(/\?/) === -1) {                  url +=  '?'  + paramsArray.join( '&' )              }  else  {                  url +=  '&'  + paramsArray.join( '&' )              }          }          //fetch请求          fetch(url,{              method:  'GET' ,          })              .then((response) => {                  callback(response)              }).done();      }      /*       *  post请求       *  url:请求地址       *  data:参数       *  callback:回调函数       * */      static  post(url,params,headers,callback){          //fetch请求          fetch(url,{              method:  'POST' ,              headers:{                  'token' : headers              },              body:JSON.stringify(params)          })              .then((response) => response.json())              .then((responseJSON) => {                  callback(responseJSON)              }) .done();      }       }   module.exports = NetUitl;

调用:

1 2 3 4 5 6 7 8 9 10 11 12 13

rightAction(){      let  params = { 'start' : '0' ,limit: '20' , 'isNeedCategory' :  true ,  'lastRefreshTime' :  '2016-09-25 09:45:12' };      NetUitl.post( 'http://www.pintasty.cn/home/homedynamic' ,params, 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU' , function  (set) {          //下面的就是请求来的数据          console.log(set)      })      //get请求,以百度为例,没有参数,没有header      NetUitl.get( 'https://www.baidu.com/' , '' , function  (set) {          //下面是请求下来的数据          console.log(set)      })   }

　　

另:因为iOS9对https的调整,需要在项目的info.plist添加Key：NSAllowsArbitraryLoads,具体方法看http://www.cnblogs.com/shaoting/p/5148323.html

完整源码下载：https://github.com/pheromone/React-Native-1