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);
    

      

  • 相关阅读:
    DOM性能小记
    利用tween.js算法生成缓动效果
    小游戏(锅打灰太狼)
    DOM应用实例(寻找房祖名)
    学习总结——DOM
    图片预加载
    删除src值为空的img标签
    2019-08-17 纪中NOIP模拟B组
    [SCOI2015] 小凸玩矩阵
    [JZOJ4899] 雪之国度
  • 原文地址:https://www.cnblogs.com/linlf03/p/5954160.html
Copyright © 2011-2022 走看看