React请求数据渲染页面

1、使用react-fetch数据发送请求

(1)get方法:
	  componentDidMount() {
		       fetch('url')
		        .then(res => res.json())
		        .then(json => this.setState({ list: json }))
	  }
	 
(2)post方法:
	 componentDidMount() {
        fetch('url', {
            method: 'post',  //改成post
            mode: 'cors',  //跨域
            headers: {  //请求头
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: "..."   //向服务器发送的数据
        })
        .then(res=> res.json())
        .then(json => {
             console.log(json)
         }) 
	 }

2、利用axios请求数据

		(1)、安装axios
					npm isntall axios --save
		(2)、引入axios
					import axios from 'axios';
		(3)、发送请求
			    axios({
			        method:"POST/GET",
			        headers:{'Content-type':'application/json'},
			        url:URL+url,
			        data:data,
			        // withCredentials:true   跨域请求设置withCredentials
			    }).then( res => {
			        console.log(res);
			        callback(that,res);
			    }).catch( error => {
			        console.log(error);
			    });
		}

3、GET请求获取本地数据json

(1)、在package.json文件里加上
				"proxy": "http://localhost:3000"
				 如下图一
(2)、执行npm start
(3)、把json放到public目录下
            如下图三
(4)、使用GET;POST无法请求本地数据
		 componentDidMount() {
	        fetch('./data.json', {
	            method: "GET",
	            headers: {
	                'Content-Type': 'application/json',
	                'Accept': 'application/json'
	            }
	        })
	        .then(response => response.json()) //解析为Promise
	        .then(data => {
	            this.setState({ data: data })   //赋值到本地数据
	            console.log(this.state.data)
	        })
	    }

4、使用json-server请求虚拟数据

(1)、安装json-server
			npm install json-server -g       
			使用json-server -h 来查看是否安装成功
(2)、在src同级目录下创建mock文件夹,新建data.json 写入数据
		如下图二
(3)、打开新的终端输入
			json-server mock/data.json -p 3000
(4)、在package.json文件中添加
			"proxy":"http://localhost:3000"
(5)、重新运行npm start
(6)、发送请求
			 componentDidMount() {
		        fetch("/data.json", { method: 'GET' })
		            .then( res => res.json()) 
		                console.log(res)
		            .then( data => 
		                console.log(data);
		            )
		        });
		    }

图一:
在这里插入图片描述
图二
在这里插入图片描述

图三
在这里插入图片描述

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值