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 https://******/submit_ajax.ashx?action=APP_GetLines')}>
<Text>发送Get网络请求</Text>
</TouchableOpacity>
<TouchableOpacity 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传送门>>>
4、@react-native-community/netinfo
第一步：安装
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";
注意此处：使用过这个API之后，就不要再引用原有的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 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>
);
}
}提示：代码中注释部分，是进行判断是否是付费网络，仅支持Android，但是在iOS上也不会出错，但会有⚠️警告信息。