react-native(Fetch網絡請求數據)

語法使用：

fetch(參數)
.then(完成的回調函數)
.catch(失敗的回調函數)

fetch(url,opts)
.then((response) => {
//請求成功後返回的對象response
//例如：json、text等
return response.text();
return response.json();
})
.then((responseData) => {
//處理請求得到的數據
})
.catch((error) => {
//網絡請求失敗執行該回調函數，得到錯誤信息
})

語法很簡單，感覺類似於Android新建Notification一樣。
then第一個是獲取整個數據，第二個是根據第一個數據轉換而來的你所需要的數據，也就是說你需要一個json數據那麼在第一步返回json就好。

1、GET請求

getRequest(url){  
      /*網絡請求的配置*/  
      var opts = {  
          method:"GET"  
      }  
      fetch(url,opts)  
          .then((response) => {  
              return response.text();  
          })  
          .then((responseText) => {  
              alert(responseText);  
          })  
          .catch((error) =>{  
              alert(error);  
          })  
  }  

2、POST請求

postRequest(url){  
       let formData = new FormData();  
       formData.append("username","SuperBigLw");  
       formData.append("password","123456");  
       var opts = {  
           method:"POST",  
           body:formData  
       }  
       fetch(url,opts)  
           .then((response) => {  
               return response.text();  
           })  
           .then((responseText) => {  
               alert(responseText);  
           })  
           .catch((error) => {  
               alert(error)  
           })  
   }  

完整代碼

import React, { Component } from 'react';  
import {  
    AppRegistry,  
    StyleSheet,  
    Text,  
    View,  
    TouchableOpacity  
} from 'react-native';  

/* 
 語法： 
 fetch(參數) 
 .then(完成的回調函數) 
 .catch(失敗的回調函數) 

 fetch(url,opts) 
 .then((response) => { 
 //請求成功後返回的對象response 
 //例如：json、text等 
 return response.text(); 
 return response.json(); 
 }) 
 .then((responseData) => { 
 //處理請求得到的數據 
 }) 
 .catch((error) => { 
 //網絡請求失敗執行該回調函數，得到錯誤信息 
 }) 
 * */  
var getUrl = "http://project.lanou3g.com/projects/bj/reactnative/login.php?username=lanou&password=123";  
var postUrl = "http://project.lanou3g.com/projects/bj/reactnative/login.php";  
class getData extends Component{  
    getRequest(url){  
        /*網絡請求的配置*/  
        var opts = {  
            method:"GET"  
        }  
        fetch(url,opts)  
            .then((response) => {  
                return response.text();  
            })  
            .then((responseText) => {  
                alert(responseText);  
            })  
            .catch((error) =>{  
                alert(error);  
            })  
    }  
    postRequest(url){  
        let formData = new FormData();  
        formData.append("username","SuperBigLw");  
        formData.append("password","123456");  
        var opts = {  
            method:"POST",  
            body:formData  
        }  
        fetch(url,opts)  
            .then((response) => {  
                return response.text();  
            })  
            .then((responseText) => {  
                alert(responseText);  
            })  
            .catch((error) => {  
                alert(error)  
            })  
    }  
    render(){  
        return(  
            <View style={styles.container}>  
                <TouchableOpacity onPress={this.getRequest.bind(this,getUrl)}>  
                    <View style={styles.btn}>  
                        <Text>GET</Text>  
                    </View>  
                </TouchableOpacity>  
                <TouchableOpacity onPress={this.postRequest.bind(this,postUrl)}>  
                    <View style={styles.btn}>  
                        <Text>POST</Text>  
                    </View>  
                </TouchableOpacity>  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container:{  
        backgroundColor:"cyan",  
        flexDirection:"row",  
        justifyContent:"space-around",  
        alignItems:"center",  
        flex:1  
    },  
    btn:{  
        width:60,  
        height:30,  
        borderWidth:1,  
        borderRadius:3,  
        borderColor:"black",  
        backgroundColor:"yellow",  
        justifyContent:"center",  
        alignItems:"center"  

    }  
});  
module.exports = getData;  

2.index.android.js

[javascript] view plain copy 在CODE上查看代碼片派生到我的代碼片
/** 
 * Sample React Native App 
 * https://github.com/facebook/react-native 
 * @flow 
 */  

import React, { Component } from 'react';  
import {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  View  
} from 'react-native';  
var GetData = require("./getData");  
export default class FetchDemo extends Component {  
  render() {  
    return (  
      <GetData/>  
    );  
  }  
}  

const styles = StyleSheet.create({  

});  

AppRegistry.registerComponent('FetchDemo', () => FetchDemo);  

原文出自
http://blog.csdn.net/superbiglw/article/details/54574161