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

末蓝、 2021-09-18 11:40 614阅读 0赞

# 网络状态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;

效果：

![20190313153041698.gif][]

# 网络请求Fetch #

app开发基本上都需要与后台进行数据交互，关于接口，一般使用的是Restful风格的API。Fetch请求返回的结果是一个Promise类型，如果使用链式写法(.then.catch)，要记住，**reject方法的作用，等同于抛出错误**，无论哪个then中发生错误都可以在catch中捕获。关于Promise类型详细可以参考[http://es6.ruanyifeng.com/\#docs/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][http_www.helloui.net_api]是我自己在阿里云测试用的服务器。效果：

![20190313160147277.gif][]

[20190313153041698.gif]: /images/20210812/05db8b6b04764aeb9299eb3e6c056ab2.png
[http_es6.ruanyifeng.com_docs_promise]: http://es6.ruanyifeng.com/#docs/promise
[http_www.helloui.net_api]: http://www.helloui.net/api
[20190313160147277.gif]: /images/20210812/7728926bdc8448258cd728a2f9f831fe.png