React-Native 网络请求和监控

前端之家收集整理的这篇文章主要介绍了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

不要的吝啬你的赞赏和☆

原文链接:https://www.f2er.com/react/304451.html

猜你在找的React相关文章