React Native 网络请求

Posted 2020-08-14 work hard work smart

如下面的Code，分别介绍了GET，POST，以及使用XMLHttpRequest的Get请求。

import React, { Component } from ‘react‘;
import { AppRegistry,
 StyleSheet,
 Text,
 View,
 Image,
 TouchableOpacity,
 TouchableHighlight,
 Toastandroid,
 Alert, } from ‘react-native‘;

var BASE_URL = ‘https://m.baidu.com‘;

class AlignItemsBasics extends Component {

    getEvent() {
        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();

    }

    getByXMLHttpRequest(){
        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if(request.readyState !== 4){
                return;
            }
            if(request.status === 200){
                ToastAndroid.show(‘success‘ + request.responseText, ToastAndroid.SHORT);
            }else{
                ToastAndroid.show(‘error‘, ToastAndroid.SHORT);
            }
        };
        request.open(‘GET‘,‘http://xxx/xxx‘);
        request.send();
    }

     postSource(){
        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() {

      return (
        <View style={{flex:1, justifyContent:‘center‘, alignItems:‘center‘}}>
            <TouchableHighlight  onPress={this.getEvent} style={styles.button}>
                  <Text>Get 请求</Text>
            </TouchableHighlight>
             <TouchableHighlight  onPress={this.getByXMLHttpRequest} style={styles.button}>
                  <Text>使用XMLHttpRequest Get 请求</Text>
             </TouchableHighlight>
             <TouchableHighlight  onPress={this.postSource} style={styles.button}>
                  <Text>Post 请求</Text>
             </TouchableHighlight>
        </View>

      );
    }


};

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

AppRegistry.registerComponent(‘AwesomeProject‘, () => AlignItemsBasics);