react项目使用axios和Charles模拟数据接口

0.安装Charles中文破解版

 

1.安装axios

yarn add axios

2.引入axios

import axios from 'axios'

3.写好json文件test.json

["vue","react","ng"]

4.配置Charles

（1）选择工具/本地映射

 

 

 （2）本地映射设置弹出框，点击添加

 

（3）如下图设置

主机必须要这么填

localhost.charlesproxy.com

 

 

 

 4.axios请求

componentDidMount(){
        axios.get('/api/test').then(res=>{
            console.log(res);
            this.setState(()=>({
                arr:[...res.data]
            }))
        })
    }

5.渲染数据

   render() {
        return (
            <div>
                <ul>
                    {
                        this.state.arr.map((v, i) => {
                            return <li key={i}>{v}</li>
                        })
                    }
                </ul>
            </div>
        );
    }

6.访问 localhost.charlesproxy.com:3000,这是一个坑，不是访问localhost:3000，是访问这个

结果：