React-Native 网络请求

大部分的app都需要进行网络连接,通过网络获取服务器的数据,然后更新app的界面展示内容,React-Native自然拥有网络的相关操作.
官方文档

fetch

1
fetch('https://mywebsite.com/endpoint/')

自定义请求的方法,请求头,请求体

1
2
3
4
5
6
7
8
9
10
11
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

//https://suggest.taobao.com/sug?code=utf-8&q=%E6%89%8B%E6%9C%BA

异步

使用then 

1
2
3
4
5
6
7
8
fetch('https://mywebsite.com/endpoint.php')
  .then((response) => response.text())
  .then((responseText) => {
    console.log(responseText);
  })
  .catch((error) => {
    console.warn(error);
  });

使用 async/await 在异步函数中调用

1
2
3
4
5
6
7
8
async getUsersFromApi() {
  try {
    let response = await fetch('https://mywebsite.com/endpoint/');
    return response.users;
  } catch(error) {
    throw error;
  }
}

WebSocket

websocket

XMLHttpRequest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint.php');
request.send();

例子

react-network

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ToastAndroid,
  Alert,
} = React;
var AwesomeProject = React.createClass({
  getByFetch : function(){
    fetch('https://m.baidu.com' )
    .then((response) => response.text())
    .then((responseText) => {
      ToastAndroid.show(responseText, ToastAndroid.SHORT);
      console.warn(new Date().getMilliseconds());
    })
    .catch((error) => {
      console.warn(error);
    }).done();
    console.warn('请求是异步的:'+new Date().getMilliseconds());
  },
  getByXMLHttpRequest : function(){
    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }

      if (request.status === 200) {
        ToastAndroid.show('success'+ request.responseText ,ToastAndroid.SHORT);
      } else {
        console.warn('error');
      }
    };

    request.open('GET', 'https://m.baidu.com');
    request.send();
  },

  postSource:  function(){
    fetch('https://m.baidu.com' )
    .then((response) => response.text())
    .then((responseText) => {
        // Works on both iOS and Android
        Alert.alert(
          '请求结果',
          responseText.substring(0,100),
          [
            {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
            {text: 'Cancel', onPress: () => console.warn('Cancel Pressed'), style: 'cancel'},
            {text: 'OK', onPress: () => console.warn('OK Pressed')},
          ]
        )
    })
    .catch((error) => {
      console.warn(error);
    }).done();

  },


  render: function() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center' }}>
        <TouchableOpacity onPress={this.getByFetch} style={ styles.button }>
          <Text  >GET by fetch</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.getByXMLHttpRequest} style={ styles.button }>
          <Text >GET by XmlHttpRequest</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress= { this.postSource } style={ styles.button }>
          <Text >POST</Text>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
    button: {
      width : 180,
      height: 50,
      justifyContent:'center',
      backgroundColor: '#e2e2e2',
      alignItems:'center',
      margin: 10,
    }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);