react-native(Fetch网络请求数据)

语法使用：

fetch(参数)
.then(完成的回调函数)
.catch(失败的回调函数)

fetch(url,opts)

.then((response) => {

//请求成功后返回的对象response

//例如：json、text等

return response.text();

return response.json();

})

.then((responseData) => {

//处理请求得到的数据

})

.catch((error) => {

//网络请求失败执行该回调函数，得到错误信息

})

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);