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

78 阅读 0 评论 52 点赞

我是靠谱客的博主迷你小霸王，这篇文章主要介绍React使用fetch进行网络请求示例，现在分享给大家，希望可以做个参考。

我网络请求的接口为

复制代码

1
2
3
4
5
6
7
请求测试地址：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}

我在React自定义组件中生命周期方法componentDidMount（）中进行的网络请求

引进fetch

复制代码

1
2
import fetch from 'dva/fetch';

在package中配置代理，用来解决跨域的问题

复制代码

1
2
"proxy": "http://www.qiaoming.online",

调用fetch进行网络请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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("出现一个问题");
            }

        })
    }