ReactNative学习——网络请求操作(fetch使用)

ReactNative学习——网络请求操作(fetch使用)

实在项目中,从服务端拉取数据展示是非常普遍的一个业务需求,原生Android开发中有很多优秀的网络框架(VolleyOkhttpHttpConnection等),RN里面,当然也有自己的网络框架就是fetch,除了fetch外,RN中文网描述RN还内置了XMLHttpRequest API(这个真不懂),所以就用fetch来实现网络请求操作了。

fetch使用

1、最简单的使用

看官方例子,使用起来还是蛮简单的,如果只是实现请求一下服务器,不需要任何操作,直接一行代码就搞定:

//RN中文网上写的https://mywebsite.com/mydata.json是伪代码,需要替换成自己实际请求地址
fetch('http://chenxiaoping.com/demo')

2、请求头和请求参数的定义

实际应用中,当然不是像上面那样使用了,会根据自己公司的需求加上相应的请求头和请求参数,还是拿上面那个地址为例

fetch('http://chenxiaoping.com/demo', {
    //请求方式,GET或POST
    method: 'GET',

    //请求头定义
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    
    //请求参数,如果有的话,可以这样方式定义,注意需要服务端支持json入参,如果不支持的话,可以尝试下面的方式
    //body: JSON.stringify({
    //   firstParam: 'value1',
    //   secondParam: 'value1',
    // }),

    //如果服务端不支持json入参,请使用这种拼接方式
    //body: 'key1=value1&key2=value2'

}).then((response) => response.json()).then(
    //响应体,resonse,json拿到的就已经是转化好的jsonObject了,使用起来就非常简便
    (responseJson) => {
        //输出打印current_user_url字段,输出的内容可以直接在androidStudio日志输出里面看到
        console.log("请求回调:" + responseJson.current_user_url);
    }
)

3、完整的代码

import React, {Component} from 'react';
import {View, Text, Alert, Button, StyleSheet} from 'react-native';

class NewWorkDemoActivity extends Component {
    render() {
        return (
            <View style={styles.style_root}>
                <Text style={styles.style_text}>HelloWorldddd</Text>
                <Button onPress={request} title="发起网络请求"/>
            </View>
        );
    }
}

//请求网络
const request = () => {
    console.log("点击了事件");
    fetch('http://chenxiaoping.com/demo', {
        //请求方式,GET或POST
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    }).then((response) => response.json()).then(
        (responseJson) => {
            console.log("请求回调:" + responseJson.current_user_url);
        })
};

let styles = StyleSheet.create({
    style_root: {
        backgroundColor: "#fae",
        flex: 1
    },
    style_text: {
        margin: 20,
    }
})

export default NewWorkDemoActivity

Demo地址:https://github.com/cenxiaoping/ReactNativeDemo

4、好像少了点什么,原生开发中除了请求头,请求体,还有一个很重要的参数——超时设置

看完一遍fetch的文档,好像真没找到设置超时的地方,这不太科学啊,但是在google上找到了解决方案,可以参考:

http://www.open-open.com/lib/view/open1472717659359.html

推荐阅读更多精彩内容