前言

  • 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习

  • 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢

  • 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢

网路请求


  • 在开发中,从网络上加载数据一直是重点和难点,尤其是在做相应的细节优化方面,在React Native 中通常是用哪种方式加载网络数据呢?

    • React Native 中通常是通过 Ajax 从服务器获取数据,在 componentDidMount 方法中创建 Ajex 请求,等到请求成功,再用 this.setState 方法重新渲染UI

什么是 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'));

综合实例


译注:

  • 下面内容整理自 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 之 网络请求 fetch的更多相关文章

  1. React Native 之 网络请求

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  3. react native 之异步请求

    第一章 异步请求  fetch的运用 在react native  中异步请求一般用fetch这个方法, fetch的格式如下: const params ={ "charset" ...

  4. [React Native]获取网络状态

    使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...

  5. React Native 获取网络数据

    getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...

  6. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

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

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  8. React Native探索(五)使用fetch进行网络请求

    相关文章 React Native探索系列 前言 React Native可以使用多种方式来请求网络,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLH ...

  9. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

随机推荐

  1. IPython Notebook 运行python Spark程序

    1.安装pip 因为centos7.0自带的python系统是2.7.5,并没有安装pip,需要先安装pip $ wget https://bootstrap.pypa.io/get-pip.py $ ...

  2. sqlite 日期型 字符串转为日期型

    因为sqlite为弱引用,使用字段前将他强制转为日期型,用datetime.或者最原始的 strftime. SELECT distinct ID from testTable where datet ...

  3. 树莓派上使用KickThemOut对局域网内的设备进行ARP欺骗

    安装KickThemOut工具 $ git clone https://github.com/k4m4/kickthemout.git $ cd kickthemout/ $ sudo -H pip ...

  4. 【洛谷P2746】Network of Schools

    题目大意:给定一个 N 个点,M 条边的有向图,第一问求至少从多少个点出发才能遍历整个有向图,第二问求至少在这个有向图的基础上加多少条边才能使得该无向图强连通. 题解:先进行 Tarjan 缩点,得到 ...

  5. (转)Maven pom.xml 配置详解

    背景:maven一直感觉既熟悉又陌生,归根结底还是自己不太熟. 1 什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者 ...

  6. zookeeper配置

    原文链接:https://www.cnblogs.com/yuyijq/p/3438829.html 前面两篇文章介绍了Zookeeper是什么和可以干什么,那么接下来我们就实际的接触一下Zookee ...

  7. 【推荐】使用Ultrapico Expresso学习正则表达式

    Ultrapico Expresso是我工作中经常使用的一个非常强大的正则表达式构建.测试以及代码生成工具.它能够对你构建的正则表达式进行解析.验证,并输出解析结果,提供性能测试工具,支持C#.VB等 ...

  8. ajaxSubmit 提交form 表单

    $(document).on('click','#submit_title_btn',function(){ var title = $("#title").val(); if ( ...

  9. Dom--属性以及创建标签

    一.Dom属性 1.1 设置属性(setAttribute) 设置某个标签的属性,setAttribute(key,value) <body> <div> <input ...

  10. HTML的前世今生

    HTML的基础知识扫盲 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 三年前,我就听周围的一些工程师说,python就是一个脚本语言,没啥好学的,学JAVA吧,python能干的J ...