zoukankan      html  css  js  c++  java
  • React Native 网络请求

    如下面的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);
    

      

  • 相关阅读:
    官方源、镜像源汇总
    Kubernetes V1.15 二进制部署集群
    ZABBIX 4.0 LTS 部署
    SSH + Google Authenticator 安全加固
    Hadoop+HBase 集群搭建
    自动化运维之PSSH
    KVM之CPU虚拟化
    GoAccess日志分析工具
    HTTPS之acme.sh申请证书
    AWStats日志分析系统
  • 原文地址:https://www.cnblogs.com/linlf03/p/5954160.html
Copyright © 2011-2022 走看看