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

Posted Mr.Landen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native之Fetch简单封装获取网络状态相关的知识,希望对你有一定的参考价值。

1、Fetch的使用

  fetch的使用非常简单,只需传入请求的url

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);
    });
}

  通过response.json()将请求的返回数据转化成json数据以便使用。通过.then来对数据进行转化处理或最终暴露给调用者;.catch对异常的处理。

2、Fetch的简单封装

  废话少说,直接上代码;

  (1)封装工具

  代码如下:

//一个 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)

  (2)封装工具的使用

   1、首先引入头文件

import HttpUtils from ‘./HttpUtils‘;

   2、实现对应的请求方法

  //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);
        })
};

   3、在需要使用的地方,发起请求;

        <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>

  更多内容,请参考:React Native网络请求传送门>>>

3、获取网络状态

/**
 * 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(){

   }
}

  这个组件已经在RN刚出来(俩平台同时支持)的时候就已经存在了,用法大家都已经很熟悉了,但是在0.48+版本中,出现了一些变化,前面的用法都会过期。

  主要完善了两个方面的问题

  - 目前的NetInfo API是分平台的.在ios和Android平台上返回完全不同的值.

  - 目前的NetInfo API无法判定连接的手机网络是 2g, 3g, 还是 4g.

  贡献者为了不造成breaking changes,所以直接新增新的api,将前面的api改为黄色警告

  - `fetch`方法过时了,用`getConnection`替代
  - `change`事件过时了,用`connectionchange`替代.
  - `fetch`/`change`过时了,用`getConnection`/`connectionchange`替代。返回的枚举值也变了。具体查看下面的值 

ConnectionType(设备的网络类型):

  跨平台:

    - none - 设备处于离线状态。

            - wifi - 设备处于联网状态且通过wifi链接,或者是一个iOS的模拟器。

            - cellular - 设备是通过Edge、3G、WiMax或是LTE网络联网的。

            - unknown - 发生错误,网络状况不可知

     Android平台:

            - bluetooth - 蓝牙数据连接

            - ethernet - 以太网数据连接

            - wimax - WiMAX数据连接

  EffectiveConnectionType(无线网络类型) :

    - 2g 

    - 3g 

    - 4g 

    - unknown

  具体用法,请参考:NetInfo传送门>>>

以上是关于React Native之Fetch简单封装获取网络状态的主要内容,如果未能解决你的问题,请参考以下文章

稀饭react native 实战系列教程之影片数据获取并解析

react-native-easy-app 详解与使用之 fetch

react-native-easy-app 详解与使用之 fetch

React Native 基于Fetch封装HTTPUtil工具类

react-native-fast-app 详解与使用之 fetch

React Native 网络请求封装:使用Promise封装fetch请求