使用charles在前端mock数据

原文：https://www.jianshu.com/p/75d24f264ce2

在前端项目里，如果后端没有及时提供接口，经常需要前端自己mock数据。这篇文章主要介绍使用charles这个软件进行mock数据的方法。

• 首先下载这个软件https://www.charlesproxy.com/latest-release/download.do
• 默认启动的是8888端口。如果端口被占用。在菜单栏找到 Proxy Settings..对端口号进行更改

• 我在前端调用的代码如下：

componentDidMount () {
    axios.get('/api/todolist')
    .then((res) => {
      console.log(res);
    })
  }

这个接口默认查找的是:

可以看到请求返回404，表示并没有找到这个接口

• 接下来在桌面新建一个文件夹mock。文件夹里新建一个todolist.json文件，写上需要mock的数据
• 配置tools -> Map Local Settings

  

  

如上图所示，Path和代码中请求的地址一致/api/todolist

• 点击ok后，在浏览器查看，发现数据已经拿到啦