美文网首页
使用charles在前端mock数据

使用charles在前端mock数据

作者: 团猫咪爱吃玉米 | 来源:发表于2018-11-05 18:19 被阅读29次

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

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

这个接口默认查找的是:


f251ea8f9f0a37d0dff670afdf63640.png

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

  • 接下来在桌面新建一个文件夹mock。文件夹里新建一个todolist.json文件,写上需要mock的数据
  • 配置tools -> Map Local Settings
    6d04345c22650a8ab8dc6bbe1d085f6.png
    cfca07af68d98b0a0f5bcdc53442915.png
    如上图所示,Path和代码中请求的地址一致/api/todolist
    f0027ff792c986526fe76192caa90eb.png
  • 点击ok后,在浏览器查看,发现数据已经拿到啦


    a5f7328a73b3d9fd236f036e6a0dc7a.png
    8511a19744bd7d57fa0c9a60900e13e.png

    是不是很方便呐~

相关文章

网友评论

      本文标题:使用charles在前端mock数据

      本文链接:https://www.haomeiwen.com/subject/inpcxqtx.html