React-Native 网络请求和监控

####(一) 网络监控 我们用NetInfo模块来监听网络状态

#####添加监听 设置两个属性用来记录状态值

constructor(props){
        super(props);
        this.state = {
            isConnected:null,connectInfo:'',};
    };

• NetInfo.isConnected.addEventListener(eventName,handler) 在网络端口或者链接是调用监听函数
• NetInfo.addEventListener(eventName,handler) 在网络状况/类型发生变化时调用此监听函数。回调的参数为上面列出的网络状况/类型。 eventName:监听事件名称 handl调函数

componentDidMount() {
        //添加网络是否连接的监听者
        NetInfo.isConnected.addEventListener('isConnected',this._handleNetStatus);
        //添加网络状态变化的监听者
        NetInfo.addEventListener('statusChange',this._handleNetChange);


        //检查网络状态
        NetInfo.isConnected.fetch().done(
            (isConnected) => {
                this.setState({isConnected:isConnected});
            }

        );
        //检查网络类型
        NetInfo.fetch().done( (netType) => {
            this.setState({
                connectInfo:netType
            });

        });


    };

移除网监听

在componentWillUnmount()方法中移除监听

• removeEventListener(eventName,handler)
• NetInfo.isConnected.removeEventListener(eventName,handler)

componentDidUnMount() {
        //移除监听
        NetInfo.isConnected.removeEventListener('isConnected',this._handleNetStatus);
        NetInfo.removeEventListener('statusChange',this._handleNetChange);
    };
    _handleNetStatus = (isConnected) => {
        console.log('First,is ' + (isConnected ? 'online' : 'offline'));

    };

    _handleNetChange = (status) => {

        console.log('Then,is ' + status);

    };

####(二) 网络请求 React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求 要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）

fetch('https://postman-echo.com/transform/collection')

Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等

//地址
        let url = 'https://postman-echo.com/transform/collection';
        //协议
        let map = {
            method:'POST',headers: {
                'Accept': 'application/json','Content-Type': 'application/json',}
        };
        //参数
        map.body=JSON.stringify({
                from:1,to:2,}
        );

//如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式
        //   map.body = 'from=1&to=2';
        //发起请求
        fetch(url,map)
            .then((response) => response.text())
            .then((responseJson) => {
                alert(responseJson);

            })
            .catch((err) => {
                alert('服务器返回错误：' + err + url+ map);
            });

别忘了catch住fetch可能抛出的异常，否则出错时你可能看不到任何提示。 代码地址:https://github.com/roycehe/react-native-100-Demos

不要的吝啬你的赞赏和☆

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!