当前 RN 版本:0.50 @H_301_3@ 操作环境:Windows 10
不知不觉中,RN 0.50 已经发布了。两个多礼拜没有接触 RN 了,已经忘得差不多了,赶紧再恶补一下写写博客,否则真的会忘得一干二净。这篇文章简单介绍 RN 中的网络请求。
使用 Fetch
Fetch 使用起来很简单,只需要简单的一行代码就可以实现网络请求:
- fetch(url)
它还可以有第二个可选的参数,用来进行请求的配置。比如指定 header 参数、指定 GET 或 POST 方法、提交表单数据等等。可以参考 Fetch请求文档 来查看所有可用的参数。
- var options = {
- method: 'POST',headers: {
- 'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
- firstParam: 'yourValue',secondParam: 'yourOtherValue',})
- };
-
- fetch(url,options);
发起请求之后要对请求到的数据进行处理, Fetch 使用链式调用的方式来进行操作,格式如下:
你还可以使用 ES7 标准中的 async/await
语法:
Promise 封装
Promise
是专门用来处理异步请求的。由于我对它也不是很熟悉,大家可以在网上查询更多的资料。
我们写个工具类 HttpUtil.js
并在其中利用 Promise
封装 get
和 post
方法,代码参考如下。
- export default class HttpUtil {
-
- /**
- * 利用 Promise 的 get 方式请求
- * @param url
- * @returns {Promise}
- */
- static get(url) {
- return new Promise((resolve,reject) => { fetch(url) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } /** * 利用 Promise 的 post 方式请求 * @param url * @param params * @returns {Promise} */ static post(url,params) { return new Promise((resolve,reject) => { fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': 'application/json' },body: JSON.stringify(params) }) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } }
接下来我们需要进行网络请求的时候就可以直接使用了。
- export default class FetchTest extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- text: '返回结果'
- }
- }
-
- get() {
- HttpUtil.get('https://facebook.github.io/react-native/movies.json')
- .then(result => this.setState({text: JSON.stringify(result)}))
- .catch(error => console.error(error))
- }
-
- post() {
- var data = {username: 'ayuhani',password: '123456'}
- HttpUtil.post('http://rapapi.org/mockjsdata/26411/ayuhani/post',data)
- .then(result => this.setState({text: JSON.stringify(result)}))
- .catch(error => console.error(error))
- }
-
- render() {
- return <View style={{flex: 1}}>
- <View style={{margin: 16}}>
- <Button
- title={'get'}
- onPress={() => this.get()}
- />
- <Button
- title={'post'}
- onPress={() => this.post()}
- />
- <Text style={{marginTop: 16}}>{this.state.text}</Text>
- </View>
- </View>
- }
- }
看一下运行效果: