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工具类