51工具盒子
在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要复杂些，所以大家有多花点时间去研究和学习；建议大家两者都要学会，毕竟您现在找工作的话，也不知道公司是用的哪种框架，加油咯！！
