11. react 基础 使用charles 模拟接口数据

Posted 2021-05-07 zonehoo

charles参考文档

charles官网

模拟数据

　　模拟 axios 请求的数据

　　　　eg:

　　　　1. 编写 axios 请求 

　　　　　　axios.get(‘/api/xxx‘)

　　　　　　　　.then(()=>{alert(‘succ‘)})

　　　　　　　　.catch(()=>{alert(‘err‘)})

　　　　2. 在 Desktop (桌面) 创建一个xxx.json文件

　　　　　　cd ~/Desktop

　　　　　　touch xxx.json

　　　　3. 编辑 xxx.json

　　　　　　["zone", "hoo"]

　　　　4. axios 发起请求时 返回 xxx.json内的数据

　　　　　　选择 charles

　　　　　　选择 上面的 Tools

　　　　　　选择 Map Local...

　　　　　　添加 选中 Enable Map Local

　　　　　　点击 Add

　　　　　　　　Protocol : http

　　　　　　　　Host : localhost

　　　　　　　　Port : 3000

　　　　　　　　Path : /api/xxx

　　　　　　　　Query :

　　　　　　　　Local path : ~/Desktop/xxx.json

　　　　5. 访问 http://localhost:3000/api/xxx

　　　　6. 结合 this.setState 赋予初始值

　　　　　　this.axios.get(‘/api/xxx‘)

　　　　　　　　.then((res)=>{

　　　　　　　　　　this.setState(()=>({　　

　　　　　　　　　　　　list : [...res.data]

　　　　　　　　　　}))

 

　　　　　　　　})