React Native从零开始（七）Fetch网络请求
先上效果图
因为网络请求比较简单，所以我们直接先开始看语法然后看这个GET和POST不同的实现就好。
一、语法使用
/*
语法：
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就好。
二、具体实现
POST和GET基本上是一样的只不过POST比GET的参数多了一个BODY，GET请求是将参数添加在url中而POST则放在body中即可。
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)
})
}三、附上完整代码
1.getData.js
/**
* Created by 11158 on 2017-01-16.
*/
/**
* Created by 11158 on 2017-01-16.
*/
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
/**
* 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);
最后说明一下这个URL可以将你上传的用户名和密码参数返回给你本身，大家可以拿这个测试。
大家可以加好友交流学习
QQ：1115856293
微信：
作者：SuperBigLw 发表于2017/1/16 15:07:22 原文链接
阅读：29 评论：1 查看评论