ReactNative学习——网络请求操作（fetch使用）

ReactNative学习——网络请求操作（fetch使用）

实在项目中，从服务端拉取数据展示是非常普遍的一个业务需求，原生Android开发中有很多优秀的网络框架（Volley，Okhttp，HttpConnection等），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