react-native系列(22)API篇：网络状态NetInfo与网络请求Fetch详解

网络状态NetInfo

NetInfo库的作用是检测当前是否联网及获取联网方式及网络牌照等信息。

要使用NetInfo库，需要先在AndroidManifest.xml中配置权限：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

要检测网络是否在线可以使用：

NetInfo.isConnected.fetch().then(isConnected => {
    console.log('网络状态：' + isConnected ? 'online' : 'offline');
});

// 事件监听
function handleFirstConnectivityChange(isConnected) {
    console.log('状态变化了，网络状态：' + isConnected ? 'online' : 'offline');
    NetInfo.isConnected.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.isConnected.addEventListener('connectionChange',handleFirstConnectivityChange);

其中isConnected为true时表示当前已经联网。

要获取当前联网方式及网络牌照可以使用：

NetInfo.getConnectionInfo().then((connectionInfo) => {
    console.log('连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
});

// 事件监听
function handleFirstConnectivityChange(connectionInfo) {
    console.log('信息变化了, 连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
    NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);

回调函数type的类型有：

• none - 设备处于离线状态
• wifi - 设备通过wifi联网，或者设备是iOS模拟器
• cellular - 设备通过蜂窝数据流量联网
• unknown - 联网状态异常

回调函数effectiveType的类型有：

• 2g
• 3g
• 4g
• unknown

贴上完整代码：

import React from 'react';
import { View, NetInfo, Button, Alert} from 'react-native';

class NetInfoAPI extends React.Component {

    // 检测网络状态
    checkNet = () => {
        NetInfo.isConnected.fetch().then(isConnected => {
            Alert.alert('提示','网络状态：' + isConnected ? 'online' : 'offline');
        });

        // 事件监听
        function handleFirstConnectivityChange(isConnected) {
            Alert.alert('提示','状态变化了，网络状态：' + isConnected ? 'online' : 'offline');
            NetInfo.isConnected.removeEventListener('connectionChange',handleFirstConnectivityChange);
        }
        NetInfo.isConnected.addEventListener('connectionChange',handleFirstConnectivityChange);
    }

    // 获取网络信息 
    getNetInfo = () => {
        NetInfo.getConnectionInfo().then((connectionInfo) => {
            Alert.alert('提示','连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
        });

        // 事件监听
        function handleFirstConnectivityChange(connectionInfo) {
            Alert.alert('提示','信息变化了, 连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
            NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange);
        }
        NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);
    }

    render(){
        return(
            <View>
                <Button 
                    onPress={this.checkNet}
                    title='检测网络状态'
                />
                <Button 
                    onPress={this.getNetInfo}
                    title='获取网络信息'
                />
            </View>
        );
    }
}

export default NetInfoAPI;

效果：

网络请求Fetch

app开发基本上都需要与后台进行数据交互，关于接口，一般使用的是Restful风格的API。Fetch请求返回的结果是一个Promise类型，如果使用链式写法(.then.catch)，要记住，reject方法的作用，等同于抛出错误，无论哪个then中发生错误都可以在catch中捕获。关于Promise类型详细可以参考http://es6.ruanyifeng.com/#docs/promise。目前的官方对Fetch是还不支持中断请求操作。

下面是一段使用Fetch实现get请求和post请求的参考代码：

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

class FetchAPI extends Component {

    // get请求-无参
    _getJson = () => {
        fetch('http://www.helloui.net/api/json/products.json')
            .then((resp) => resp.json())
            .then((json)=>{
                Alert.alert('请求成功：', JSON.stringify(json)); // json：Array(3) [Object, Object, Object]
            })
            .catch((error)=>{
                console.log(error);
            }
        );
    }

    // get请求-带参
    _getWithParam = () => {
        fetch('http://www.helloui.net/rn_get?name=admin')
            .then((resp) => resp.json())
            .then((json)=>{
                Alert.alert('请求成功：', JSON.stringify(json)); // json：Object {name: "admin"}
            })
            .catch((error)=>{
                console.log(error);
            }
        );
    }

    // post请求
    // 如果'Content-Type': 'application/x-www-form-urlencoded'格式
    // 则参数入参为字符串 body:JSON.stringify({name: 'admin'});
    // 或者 body: 'data='+ JSON.stringify({name: 'admin'});
    // 是否加 'data='前缀取决于后台获取请求体body的方式
    // 如果要连接本地服务器联调测试，请使用10.0.2.2代替localhost或127.0.0.1，如果跨域联调请使用cors
    _post = () => {
        let data = JSON.stringify({
            name:'admin'
        });
        const body = new FormData();
        body.append('data', data);
        fetch('http://www.helloui.net/rn_post', {
                method: 'POST',
                body,
                headers: {
                    'Content-Type':'multipart/form-data',
                    'Accept': 'application/json'
                }
            })
            .then((resp) => resp.json())
            .then((json)=>{
                Alert.alert('请求成功：', JSON.stringify(json)); // json：Object {name: "admin"}
            })
            .catch((error)=>{
                console.log(error);
            }
        );
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                
                <TouchableOpacity 
                    onPress={this._getJson}
                    activeOpacity={0.8}
                >
                    <View style={styles.btnViewStyle}>
                        <Text style={styles.btnTextStyle}>GET JSON Fetch请求</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity 
                    onPress={this._getWithParam}
                    activeOpacity={0.8}
                >
                    <View style={styles.btnViewStyle}>
                        <Text style={styles.btnTextStyle}>GET WithParam Fetch请求</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity 
                    onPress={this._post}
                    activeOpacity={0.8}
                >
                    <View style={styles.btnViewStyle}>
                        <Text style={styles.btnTextStyle}>POST Fetch请求</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle:{
        flex: 1
    },
    btnViewStyle: {
        backgroundColor: 'green',
        height: 100,
        borderWidth: 1,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    btnTextStyle: {
        color: 'white',
        fontSize: 24
    }
});

export default FetchAPI;

其中http://www.helloui.net/api是我自己在阿里云测试用的服务器。效果：