【React自制全家桶】七、React实现ajax请求以及本地数据mock

一、下载axios插件

?

1	yarn add axios

　　

二、React的ajax请求代码如何放置

建议放置在生命周期函数之componentDidMount()中

 

三、ajax之get请求

?

1 2 3 4 5 6 7 8 9

axios.get('url')     .then(()=>{         // 成功     alert('success'); })     .catch(()=>{     // 失败     alert('false'); })

　　解析：get内放置url，then后是请求成功的回调函数，catch是请求失败的回调函数

 

四、本地mock（模拟）请求

web开发时，一般都是前后端分离。因而前端开发时常常需要进行模拟请求（即mock）来检测数据渲染情况。

推荐mock工具： charles。

 

五、下载安装charles

网址：https://www.charlesproxy.com/download/

 

六、写入模拟数据

新建json文件：app.json（建议将文件放在你的React项目同级目录）

写入

?

1	["Dell","Odhle","paiobodewu"]

 

七、打开charles修改端口

1、打开charles

2、点击菜单栏的tools

3、选择Map local...

4、新建：

只需要修改

（1）Path修改为你的ajax请求的url地址

（2）Location path修改为你的json文件地址