×

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

作者:Web前端之家2020.06.12来源:Web前端之家浏览:5188评论:0
关键词:jsreactvuejspostget
微信公众号

微信公众号

在Web前端开发项目中,处理数据交互,不管在原生javascriptjQuery还是在流行框架vuejsreact里,普遍用的是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要复杂些,所以大家有多花点时间去研究和学习;建议大家两者都要学会,毕竟您现在找工作的话,也不知道公司是用的哪种框架,加油咯!!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/react20200612.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria