React Native - 网络请求详解（使用XMLHttpRequest、Fetch请求数据）

作者：hangge | 2017-05-09 08:10

在 App 中，网络数据请求是必不可少的。React Native 提供了两种网络 API 供我们使用，下面分别进行介绍。

一、使用XMLHttpRequest方式请求

如果有做过 Web 开发，那么对 XMLHttpRequest 肯定很熟悉。而 React Native 对 XMLHttpRequest 的实现几乎和 Web 是一样的。

唯一不同的是：React Native 中的 XMLHttpRequest API 不存在跨域的限制，而是作为全局 API 实现的。

1，效果图

点击“获取数据”按钮后，通过 XMLHttpRequest 方式请求数据，并将得到的结果显示在页面上。

2，样例代码

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

//默认应用的容器组件
class App extends Component {

  //构造函数
   constructor(props) {
      super(props);
      this.state = {
          responseText: null
      };
   }

   //渲染
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.doXMLHttpRequest.bind(this)}>获取数据</Text>
         <Text>{this.state.responseText}</Text>
        </View>
      );
   }

   //使用XMLHttpRequest请求数据
   doXMLHttpRequest(){
     var request = new XMLHttpRequest();
     request.onreadystatechange = (e) => {
       if (request.readyState !== 4) {
         return;
       }

       if (request.status === 200) {
         alert("请求成功！");
         this.setState({responseText: request.responseText})
         console.log(request.responseText);

       } else {
         alert("请求失败！");
       }
     };

     request.open('GET', 'https://httpbin.org/get');
     request.send();
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    margin:15,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('ReactDemo', () => App);

二、使用Fetch方式请求

相对于 XMLHttpRequest 来说，fetch 是一个封装程度更高的网络 API，它已经通过了标准委员会并在 Chrome 中实现。同样在 React Native 中，也默认实现了 Fetch。

1，使用样例

这里实现一个同上面 XMLHttpRequest 请求同样功能的样例，只不过数据请求相关代码使用 Fetch 代替。

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

//默认应用的容器组件
class App extends Component {

  //构造函数
   constructor(props) {
      super(props);
      this.state = {
          responseText: null
      };
   }

   //渲染
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.doFetch.bind(this)}>获取数据</Text>
         <Text>{this.state.responseText}</Text>
        </View>
      );
   }

   //使用Fetch请求数据
   doFetch(){
       fetch('https://httpbin.org/get')
       .then(function(data){
         return data.text();
       })
       .then((responseText) => {
         alert("请求成功！");
         this.setState({responseText})
         console.log(responseText);
       })
       .catch((error) => {
         alert("请求失败！");
       });
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    margin:15,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('ReactDemo', () => App);

2，对Fetch进行封装

（1）这里我们对 Fetch 进行一个封装，实现一个支持 POST 请求的简单 API。

//带参数的POST请求
function postRequest(url, data, callback) {
  var opts = {
    method: 'POST',
    headers: {
      'Accept': 'application/json'
    },
    body: JSON.stringify(data)
  }

  fetch(url, opts)
  .then((resonse) => resonse.text())
  .then((responseText) => {
    //将返回的JSON字符串转成JSON对象，并传递到回调方法中
    callback(JSON.parse(responseText));
  });
}

（2）使用样例

 var data = {id:123, name:'hangge.com'};
 postRequest('https://httpbin.org/post', data, function(result){
   alert("请求成功！");
   console.log(result);
 })

React / React Native