React Native之Fetch简单封装、获取网络状态

fetch('https://facebook.github.io/react-native/movies.json');

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

//一个 Promise 就是一个代表了异步操作最终完成或者失败的对象
export default class HttpUtils{
    static get=(url)=>{
        return new  Promise(((resolve, reject) => {//resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）
            fetch(url)//默认是GET
                .then(response=>response.json())//把数据解析成json格式,然后取出
                .then(result=>{
                       resolve(result);//表示完成
                })
                .catch(error=>{
                        reject(error);//表示失败
                })
            })
        )
    };
    static post=(url,data)=>{
        return new Promise(((resolve, reject) => {
            fetch(url,{
                method:'POST',
                header:{
                    'Accept':'application/json',//告诉服务器，我们能接受json格式的返回类型，
                    'Content-Type':'application/json',//告诉服务器，我们提交的数据类型
                },
                body:JSON.stringify(data),//(把你想提交得数据序列化为json字符串类型，然后提交)body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等
            })//返回 服务器处理的结果
                .then(response=>response.json())
                .then(result=>{
                    resolve(result);
                })
                .catch(error=> {
                    reject(error);
                })
            })
        )
    }
}
//数据转换成字符串 JSON.stringify(params)      //将数据JSON化 JSON.parse(responseJSON)

import HttpUtils from './HttpUtils';

  //get数据
onLoad=(url)=>{
    HttpUtils.get(url)//调用自定义组件方法，返回一个Promise
        .then(result=>{//then函数会返回一个新的promise
            this.setState({
                result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串

            });
            console.log(result)
        })
        .catch(error=> {
            this.setState({
                result: JSON.stringify(error),//把错误信息格式化为字符串

            });
            console.log(result);
        })
};

//模拟登陆Post
onSubmit=(url,data)=>{
    HttpUtils.post(url,data)
        .then(result=>{
            this.setState({
                result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串

            });
            console.log(result);
        })
        .catch(error=> {
            this.setState({
                result: JSON.stringify(error),//把错误信息格式化为字符串

            });
            console.log(result);
        })
};

        <TouchableOpacity style={{marginVertical: 20 }} onPress={() => this.onLoad('https://******/submit_ajax.ashx?action=APP_GetLines')}>
          <Text>发送Get网络请求</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{marginVertical: 20 }} onPress={() => this.onSubmit('https://******/submit_ajax.ashx?action=APP_GetCardslist',{Uid:'37985'})}>
          <Text>发送POST网络请求</Text>
        </TouchableOpacity>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  NetInfo,
  ToastAndroid,
  View
} from 'react-native';

class NetworkInfo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isConnected: null,
      connectionInfo: null,
    };

  }

  componentDidMount() {
    //网络是否连接的监听
    NetInfo.isConnected.addEventListener(
      'isConnected',
      this._handleConnectivityChange
    );

    //网络状态变化的监听
    NetInfo.addEventListener(
      'statusChange',
      this._handleNetStatusChange
    );


    //检测网络是否连接
    NetInfo.isConnected.fetch().done(
      (isConnected) => { this.setState({ isConnected: isConnected }); }
    );
    //检测网络连接状态
    NetInfo.fetch().done(
      (connectionInfo) => { this.setState({ connectionInfo }); }
    );
  }



  componentWillUnmount() {
    //卸载两个监听
    NetInfo.isConnected.removeEventListener(
      'isConnected',
      this._handleConnectivityChange
    );
    NetInfo.removeEventListener(
      'statusChange',
      this._handleNetStatusChange
    );
  }


  _handleConnectivityChange = (isConnected) => {
    ToastAndroid.show((isConnected ? 'online' : 'offline'), ToastAndroid.SHORT);
  }

  _handleNetStatusChange = (status) => {

    ToastAndroid.show('当然网络状态：' + status, ToastAndroid.SHORT);

  }

  render(){

   }
}

yarn add @react-native-community/netinfo
或
npm install --save @react-native-community/netinfo

react-native link @react-native-community/netinfo

import NetInfo from "@react-native-community/netinfo";

import { NetInfo } from "react-native";

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

import React from 'react';
import {Text, View,TouchableWithoutFeedback} from 'react-native';
import NetInfo from '@react-native-community/netinfo';

export default class IsConnected extends React.Component<{}, $FlowFixMe> {
  state = {
    isConnected: null,
    // isConnectionExpensive: null,
  };
  // _checkIfExpensive = () => {
  //   NetInfo.isConnectionExpensive().then(isConnectionExpensive => {
  //     this.setState({isConnectionExpensive});
  //   });
  // };
  componentDidMount() {
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this._handleConnectivityChange,
    );
    NetInfo.isConnected.fetch().done(isConnected => {
      this.setState({isConnected});
    });
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this._handleConnectivityChange,
    );
  }

  _handleConnectivityChange = isConnected => {
    this.setState({
      isConnected,
    });
  };

  render() {
    return (
      <View style={{backgroundColor:'white',marginTop:20,flex:1}}>
        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
      {/*  <TouchableWithoutFeedback onPress={this._checkIfExpensive}>
         <View>
           <Text>
             Click to see if connection is expensive:
             {this.state.isConnectionExpensive === true
               ? 'Expensive'
               : this.state.isConnectionExpensive === false
               ? 'Not expensive'
               : 'Unknown'}
           </Text>
         </View>
       </TouchableWithoutFeedback>*/}
      </View>
    );
  }
}