在Web前端开发项目中,处理数据交互,不管在原生javascript、jQuery还是在流行框架vuejs和react里,普遍用的是get和post方法;前二者的处理,相信大家很熟悉了,不在此次分享主题中,至于vuejs之前也分享过一篇文章:聊聊vuejs里对于API接口的处理、封装以及跨域方法应用,今天我们是谈谈react中的get与post以及封装应用。
跟原生的js里一样,post是发送请求,后端返回相关数据,而get我们可以直接从服务器后台拉取相关数据,这个很简单,不啰嗦了。
下面聊下react里的处理方法。
处理方式
post
拿表单的提交为例:
let formData = new FormData(); formData.append("name","admin"); formData.append("password","admin123"); etch(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); );
这个是个很简单的表单,提交用户名和密码的方式处理。
get
安装superagent模块,这是一个可以从服务器获取get数据或者把数据推送post到服务器的工具:
zhyuzh$ cnpm i superagent --save-dev
在dist目录下创建一个datas/mydata.js用于放置文件,代替服务器接口返回的数json数据,所以最好使用严格的json格式,字段名都带双引号,最后一个字段后面不带逗号:
[{ "title": "标题1", "text": "文字内容1" },{ "title": "标题2", "text": "文字内容2" }]
发起get请求
当元素被添加到页面时候,发起请求,注意这里使用JSON对数据进行了转换.
获取数据之后,使用setState能够让数据立即生效。
HomePage.js中修改的部分:
componentDidMount() { let that = this superagent.get('datas/mydata.js') .end((err, res) => { that.setState({ mylist: JSON.parse(res.text) }) }) }
在render()方法中,如果使用了mylist数据生成元素(比如用一个list生成多个重复界面元素),setState会在数据读取完成后自动刷新这些元素。
类似下面的代码:
let rightItems = [] for (let i = 0; i < this.state.articleList.length; i++) { let data = this.state.articleList[i] rightItems.push(h(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, }, [ h(Card, { className: css.card }, h(CardContent, {}, [ h(CardMedia, { image: data.image, className: css.cardMedia }), h(CardContent, { style: { padding: 0 }, }, data.title) ])) ])) }
react中get与post的区别
1.提交方式
get : get会将接收到的数据拼接到url地址中,以"?"问号划分,问号后面是接收到的数据,多个数据之间用&连接.用户可以很直观的看见。
post : post会将接收到的数据放置在html header中一起发送到指定的url地址内.用户看不到这个过程。
2.传递数据大小
get : get传递数据的大小因为受到浏览器地址栏的限制,所以一般在2k-8k,这要据浏览器而定,比如谷歌浏览器就是8k。
post : post传递数据的大小最小是2M,但理论上是无上限的。
3.应用范围
get : get一般用于获取/查询资源信息.多用于a标签的href属性中,也常用于location.href属性中。
post :post一般是用于更新数据信息.多用于表单提交。
4.安全性
get的安全性比post较差。
封装和应用
这里直接上DEMO,比如我们可以这样去分装一段功能代码:
'use strict'; import React, { Component, } from 'react-native'; class NetUitl extends React.Component { static postFrom(url, data, callback) { var fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'data=' + data + ''//这里我参数只有一个data,大家可以还有更多的参数 }; fetch(url, fetchOptions).then((response) => response.text()).then((responseText) => { callback(JSON.parse(responseText)); }).done(); } /** *url :请求地址 *data:参数(Json对象) *callback:回调函数 */ static postJson (url,data,callback){ var fetchOptions = { method:'POST', headers:{ 'Accept': 'application/json', //json形式 'Content-Type': 'application/json' }, body: JSON.stringify(data) }; fetch(url, fetchOptions).then((response) => response.text()).then((responseText) => { callback(JSON.parse(responseText)); }).done(); } //get请求 /** *url :请求地址 *callback:回调函数 */ static get(url, callback) { fetch(url).then((response) => response.text()).then((responseText) => { callback(JSON.parse(responseText)); }).done(); } } module.exports = NetUitl;
然后再去具体分模块去应用它:
//get 的调用方法 NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function (ret) { //回调的结果处理; }) //post接口 /* let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'}; NetUitl.postJson(url,,function (set){ switch (set.retCode) { case "0000": alert("登录成功"); break; case "0001": alert("登录失败"); break; default: alert("登录失败"); }); //postFrom的调用 let url = Global.LOGIN; let map = new Map() map.set('username',phone); map.set('password',pwd); let sx = Util.mapToJson(Util.tokenAndKo(map)); NetUitl.postFrom(url,sx,function (set){ switch (set.retCode) { case "0000": alert("登录成功"); break; case "0001": alert("登录失败"); break; default: alert("登录失败"); } });
我们发现,其封装逻辑,跟我们处理原生的思想差不多,只不过是换了种方式而已。只要你掌握了基础,相信处理这些都不是很难的事情。
总结
react相比vue要复杂些,所以大家有多花点时间去研究和学习;建议大家两者都要学会,毕竟您现在找工作的话,也不知道公司是用的哪种框架,加油咯!!
网友评论文明上网理性发言 已有0人参与
发表评论: