简单了解下react中处理API的get与post以及封装应用

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