您当前的位置:首页 > 网站建设 > React
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

React使用fetch进行网络请求示例

51自学网 2020-03-09 17:10:06
  React
React使用fetch进行网络请求示例

我网络请求的接口为

请求测试地址:http://www.qiaoming.online/requestdemo/login
请求方式:post
请求参数:  name:"admin",        pwd:"123456"
请求头: 'content-type': 'application/json'
请求成功返回值:{"flag":"200","message":"请求成功!","data":null}
请求失败返回值:{"flag":"401","message":"请求失败!","data":null}
1
2
3
4
5
6
我在React自定义组件中生命周期方法componentDidMount()中进行的网络请求

引进fetch
import fetch from 'dva/fetch';
1
在package中配置代理,用来解决跨域的问题
"proxy": "http://www.qiaoming.online",
1
调用fetch进行网络请求
componentDidMount() {
        //请求的url
        const url="/requestdemo/login";
        //请求的参数
        const param={
            name:"admin",
            pwd:"123456"
        };
        //调用fetch
        fetch(url,{
            //请求方式
            method:'POST',
            //将请求的参数转成json
            body:JSON.stringify(param) ,
            //请求头
            headers: {
                'content-type': 'application/json'
            }
        // 请求的返回值
        }).then(function (response) {
            if(response.status===200){
                response.json().then(function (data) {
                    //获取请求的返回字段
                    console.log(data);
                    console.log(data.flag);
                    console.log(data.message);
                    console.log(data.data)
                })
            }else {
                alert("出现一个问题");
            }

        })
    }
————————————————
版权声明:本文为CSDN博主「QM_姚丹」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34475058/article/details/84238108
下载地址:
在React中获取数据
How to fetch data with React Hooks?
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1