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

  

时间: 2024-12-18 16:23:32

React Native 网络请求的相关文章

React Native 网络请求封装:使用Promise封装fetch请求

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好.而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API.http://blog.csdn.net/withings/article/details/71331726 fet

react native 网络get请求方式参数不可为undefined或null

react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshing, loading, spId, number, spfId = null, pgId = null) { console.warn('==>',spId+":"+number); return (isRefreshing || loading) ? {types: [FETCH

React Native网络编程之Fetch

目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理 ? 1. 前言 ? 网络请求是开发APP中不可或缺的一部分,比如最基本的获取用户订单数据/获取商品数据/提交表单到服务器等等都离不开网络请求,那么在RN中是如何进行网络请求的呢? ? 2. 什么是Fetch ? Fetch API提供了一个JS接口,用于进行网络操作,例如请求和响应.它还提供了一个全局fetch方法,该方法提供了一种简单,合理的方式来跨网

[RN] React Native Fetch请求设置超时

一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. 这个时候会有三种情况出现: 1.A任务在8秒内完成(假定8秒超时),Promise.race任务正常结束. 2.超过8秒A任务仍然未完成,由B任务计时结束自动中断Promise.race. 3.发生异常,Promise.race自动结束. 针对以上三种情况来设计网络超时方案. 二.代码 HttpU

React Native之Fetch简单封装、获取网络状态

1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是否请求成功与数据的处理,我们还需处理成功与失败的回调 function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/react-native/movies.json') .then((response) =>

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)

React Native 网络层分析

文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实和处理Web应用中发送的请求的过程是不一样的.因为处理这个请求的目标不是浏览器,而是嵌入这个应用的原生操作系统. 在处理React Native的请求时,分为两部分:一部分是JavaScript的运行环境,另一部分是嵌入JavaScript的Native(即原生Android和IOS)运行环境.Re

React Native探索(五)使用fetch进行网络请求

前言 React Native可以使用多种方式来进行网络请求,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法. 1.get请求 fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 . get请求访问淘宝IP库 我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明.请求代码如下所

React Native中的网络请求

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React