React Native 之 网络请求
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
网路请求
- 在开发中,从网络上加载数据一直是重点和难点,尤其是在做相应的细节优化方面,在React Native 中通常是用哪种方式加载网络数据呢?
- React Native 中通常是通过 Ajax 从服务器获取数据,在
componentDidMount
方法中创建 Ajex 请求,等到请求成功,再用this.setState
方法重新渲染UI
- React Native 中通常是通过 Ajax 从服务器获取数据,在
什么是 fetch
fetch 目前还不是 W3C 规范,是由 whatag 负责研发。与 Ajax 不同的是,它的 API 不是事件机制,而是采用目前流行的 Promise(MDN Promise) 方式处理
格式:
fetch(url, init)
.then((response) => { // 数据解析方式
})
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done();
- 上面的示例中的
init
是一个对象,他里面包含了:- method:请求方式(GET、POST、PUT等)。
- headers:需要用到 Headers 对象使用这个参数。
- body:需要发送的数据
- mode:跨域设置(cors, no-cors, same-origin)
- cache:缓存选项(default, no-store, reload, no-cache, force-cache, or only-if-cached)
译注:
- body:不可传对象,用JSON.stringify({...})也不可以,在jQuery 中会自动将对象封装成 formData 形式,fetch不会。
- mode属性控制师傅跨域,其中 same-origin(同源请求,跨域会报error)、no-cors(默认,可以请求其它域的资源,不能访问response内的属性)和 cros(允许跨域,可以获取第三方数据,必要条件是访问的服务允许跨域访问)。
- 使用 fetch 需要注意浏览器版本,但 React-Native 则不需要考虑。
response
对象可以有如下几种解析方式- arrayBuffer()
- json()
- text()
- blob()
- formData()
下面是一个最基本的请求,只传入一个参数,默认为 GET 方式请求
fetch(url)
.then((response) => response.json()) // json方式解析,如果是text就是 response.text()
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done();
- 针对表单提交的请求,我们通常采用 POST 的方式。
方式一:
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
body:"key1=value&key2=value…&keyN=value"
})
.then((response) => { // 数据解析方式
})
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done();
- 在 JQuery 中,传入对象框架会自动封装成 formData 的形式,但是在 fetch 中没有这个功能,所以我们需要自己初始化一个 FormData 直接传给 body (补充:FormData也可以传递字节流实现上传图片功能)
方式二:
let formData = new FormData();
formData.append("参数", "值");
formData.append("参数", "值");
fetch(url, {
method:'POST,
headers:{},
body:formData,
}).then((response)=>{
if (response.ok) {
return response.json();
}
}).then((json)=>{
alert(JSON.stringify(json));
}).catch.((error)=>{
console.error(error);
})
译注:
- application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。 text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
- Fetch 跨域请求的时候默认是不带 cookie 的,如果需要进行设置 credentials:'include'。
获取 HTTP 头信息
console.log(response.headers.get('Content-Type'));
...
console.log(response.headers.get('Date'));
- 如果想了解更多,可以前往这个网址进行学习:更多 fetch 学习点我
综合实例
- 综合实例直接放到了这里 React Native 之 实战项目(一)
译注:
- 下面内容整理自 React-Native 中文网
其他可用网路库
React Native 中已经内置了 XMLHttpRequest API,一些基于 XMLHttpRequest 封装的第三方库也可以使用(如:axios、frisbee)但不能使用 jQuery,因为 jQuery 中还使用了很多浏览器才有而RN中没有的东西
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState != 4) {
return;
} if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
} request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();注意:由于安全机制与网页环境有所不同:在应用中你可以访问任何网站,没有跨域的限制
WebSocket
React Native 还支持
WebSocket
,这种协议可以在单个TCP连接上提供全双工的通信信道var ws = new WebSocket('ws://host.com/path'); ws.onopen = () => {
// 打开一个连接
ws.send('something'); // 发送一个消息
}; ws.onmessage = (e) => {
// 接收到了一个消息
console.log(e.data);
}; ws.onerror = (e) => {
// 发生了一个错误
console.log(e.message);
}; ws.onclose = (e) => {
// 连接被关闭了
console.log(e.code, e.reason);
};
React Native 之 网络请求的更多相关文章
- react native 之异步请求
第一章 异步请求 fetch的运用 在react native 中异步请求一般用fetch这个方法, fetch的格式如下: const params ={ "charset" ...
- [React Native]获取网络状态
使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...
- React Native 获取网络数据
getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- React Native控件之Listview
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- react native 网络get请求方式参数不可为undefined或null
react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshi ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
随机推荐
- 安装php扩展后,执行时找不到扩展 class xxx no found
当编译安装一个新的php扩展,例如安装redis, 安装后 执行 new Redis(), 如果发现找不到class Redis,可以先检查redis.so文件是否在php的扩展目录下, 如果发现是, ...
- NRF24L01无线通讯模块驱动
NRF24L01 无线模块,采用的芯片是 NRF24L01,该芯片的主要特点如下: )2.4G 全球开放的 ISM 频段,免许可证使用. )最高工作速率 2Mbps,高校的 GFSK 调制,抗干扰能力 ...
- ADXL345加速度传感器驱动
ADXL345 是 ADI 公司的一款 3 轴.数字输出的加速度传感器.ADXL345 是 ADI 公司推 出的基于 iMEMS 技术的 3 轴.数字输出加速度传感器.该加速度传感器的特点有: ...
- iOS 改变导航栏高度
需求: appdelegate里 rootviewcontroller 是tabbarcontroller,tabbarcontroller里有4个navigationcontroller,改变每个n ...
- UVa 124 - Following Orders
题目大意:给一个变量列表和变量的大小关系,输出所有的满足约束的序列. 构建为有向图,然后就是拓扑排序,使用回溯输出所有的结果. #include <cstdio> #include < ...
- IOS中单例NSUserDefaults的使用(转)
一.了解NSUserDefaults以及它可以直接存储的类型 http://my.oschina.net/u/1245365/blog/294449 NSUserDefaults是一个单例,在整个程序 ...
- html5 安卓拨打电话 发短信
方法一: <input name=”phone_no” format=”*m” value=”13″/> <do type=”option” label=”呼出号”> < ...
- Android项目文件结构
一.Project项目结构 app/build/ app模块build编译输出的目录 app/build.gradle app模块的gradle编译文件 app/app.iml app模块的配置文件 ...
- jquery中html()或text()方法获取或设置p标签的值
html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...
- MVVM指南(课程学习)
iOS MVVM 参考 iOS MVVM 前世今生 iOS MVVM 优缺点 下面是我对MVVM知识的总结,主要包括模块划分.开发步骤.重点解说三部分.做这篇文章,主要是考虑总结出可执行的开发步骤,按 ...