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

it2022-06-09  91

一、下载axios插件

yarn add axios

  

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

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

 

三、ajax之get请求

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项目同级目录)

写入

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

 

七、打开charles修改端口

1、打开charles

2、点击菜单栏的tools

3、选择Map local...

4、新建:

只需要修改

(1)Path修改为你的ajax请求的url地址

(2)Location path修改为你的json文件地址

转载于:https://www.cnblogs.com/piaobodewu/p/9406560.html

相关资源:Windows环境下react请求本地接口错误

最新回复(0)