在ReactNative中，使用fetch实现网络请求。fetch同XMLHttpRequest非常类似，是一个封装程度更高的网络API，使用起来很简洁，因为使用了Promise。
Promise是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更合理、更强大。ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已失败）。Promise实例生成以后，可以分别指定“完成”和“失败”状态的回调函数。实现方式：链式调用方法，fetch中使用的就是该特性。
语法：
fetch(参数)
.then(完成的回调函数)
.catch(失败的回调函数)
fetch(url, opts)
.then((response) => {
// 网络请求成功执行的回调函数，得到响应对象，通过response可以获取请求的数据。例如：json、text等等
return response.text();
// return response.json();
})
.then((responseData) => {
// 处理请求得到的数据
})
.catch((error) => {
// 网络请求失败执行该回调函数，得到错误信息
})
在POST请求中需要用到一个FormData的概念。
FormData
Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest2级定义了FormData类型，FormData主要用于实现序列化表单以及创建与表单格式相同的数据。
var data = new FormData();
data.append("name", "xiaoming");
append方法接收两个参数：键和值。分别对应表单字段的名字和字段中包含的值，添加多个键值对。
在jQuery中，“key1=value1&key2=value2”作为参数传入对象框架会自动封装成FormData形式。在Fetch中进行post请求时，需要自动创建FormData对象传给body。
示例1 - 网络请求的用法
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
// GET请求
function getRequest(url) {
var opts = {
method: "GET"
};
fetch(url, opts)
.then((response) => {
return response.text(); // 返回一个带文本的对象
})
.then((responseText) => {
alert(responseText);
})
.catch((error) => {
alert(error);
})
}
// POST请求
function postRequest(url) {
// 将“key1=value1&key2=value2”封装成FormData形式
let formData = new FormData();
formData.append("username", "xiaoming");
formData.append("password", "123");
var opts = {
method: "POST",
body: formData
};
fetch(url, opts)
.then((response) => {
return response.text(); // 返回一个带文本的对象
})
.then((responseText) => {
alert(responseText);
})
.catch((error) => {
alert(error);
})
}
var GetData = React.createClass({
render: function () {
return(
<View style={styles.container}>
<TouchableOpacity onPress={getRequest.bind(this, "http://demo.php?username=小&password=123")}>
<View style={styles.btn}>
<Text>GET</Text>
</View>
</TouchableOpacity>
<TouchableOpacity opPress={postRequest.bind(this, "http://demo.php")}>
<View style={styles.btn}>
<Text>POST</Text>
</View>
</TouchableOpacity>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 30,
backgroundColor: "cyan",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
},
btn: {
width: 60,
height: 30,
borderWidth: 1,
borderRadius: 3,
borderColor: "black",
backgroundColor: "yellow",
justifyContent: "center",
alignItems: "center"
},
});
module.exports = GetData;
运行结果：
运行结果.png
示例2 - 网络请求获取列表数据
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
ListView,
Image
} from 'react-native';
/*
展示电影列表
逻辑：未获取数据时，显示等待页面；获取数据时，显示电影列表页面
需要给state添加一个属性，用于记录数据获取状态
*/
var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json";
var MovieList = React.createClass({
// 设置初始状态值
getInitialState: function () {
// 定义一个dataSource对象
var ds = new ListView.DataSource({
rowHasChanged: (oldRow, newRow) => oldRow != newRow
});
return {
// 数据是否下载成功的标识
loaded: false,
dataSource: ds
};
},
// 请求数据
getData: function () {
fetch(REQUEST_URL)
.then((response) => {
return response.json();
})
.then((responseData) => {
// 刷新组件，重新渲染组件，展示ListView
// 得到新的数据，更新dataSource
this.setState({
loaded: true,
dataSource: this.state.dataSource.cloneWithRows(responseData.movies)
});
})
.catch((error) => {
alert(error);
})
},
render: function () {
// 如果未请求到数据，提示“加载等待”页面
if (!this.state.loaded) {
return this.renderLoadingView();
}
// 电影列表
return (
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
initialListSize={10}
renderHeader={this._renderHeader}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
/>
);
},
// 组件挂载完成 生命周期函数
componentDidMount: function () {
// 组件挂载后，开始请求数据
this.getData();
},
// 等待加载页面
renderLoadingView: function () {
return(
<View style={styles.loadingContainer}>
<Text style={styles.loadingText}>Loading movies ...</Text>
</View>
);
},
// 渲染行
_renderRow: function (movie) {
return (
<View style={styles.rowContainer}>
<Image style={styles.thumbnail} source={{uri:movie.posters.thumbnail}}/>
<View style={styles.textContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
},
// 渲染头部
_renderHeader: function () {
return (
<View style={styles.header}>
<Text style={styles.header_text}>Movie List</Text>
<View style={styles.headerSeparator}></View>
</View>
);
},
// 渲染分割线
_renderSeparator: function (sectionID: number, rowID: number) {
var style = {
height: 1,
backgroundColor: "#CCC"
};
return (
<View style={style} key={sectionID + rowID}></View>
);
}
});
var styles = StyleSheet.create({
// Loading样式
loadingContainer: {
flex: 1,
marginTop: 25,
backgroundColor: "cyan",
justifyContent: "center",
alignItems: "center",
},
loadingText: {
fontSize: 30,
fontWeight: "bold",
textAlign: "center",
marginLeft: 10,
marginRight: 10
},
// ListView Row样式
rowContainer: {
flexDirection: "row",
padding: 5,
alignItems: "center",
backgroundColor: "#F5FCFF"
},
thumbnail: {
width: 53,
height: 81,
backgroundColor: "gray"
},
textContainer: {
flex: 1,
marginLeft: 10
},
title: {
marginTop: 3,
fontSize: 18,
textAlign: "center"
},
year: {
marginTop: 3,
marginBottom: 3,
textAlign: "center"
},
// List Header样式
header: {
height: 44,
backgroundColor: "#F5FCFF"
},
header_text: {
flex: 1,
fontSize: 20,
fontWeight: "bold",
textAlign: "center"
},
headerSeparator: {
height: 1,
backgroundColor: "#CCC"
},
listView: {
marginTop: 25,
backgroundColor: "#F5FCFF"
}
});
module.exports = MovieList;
运行结果
运行结果.png
网友评论