• 你还在用Mock服务模拟接口请求和数据吗?快来试试Chrome DevTools吧!
  • 发布于 2个月前
  • 411 热度
    0 评论
  • 冰魄
  • 0 粉丝 48 篇博客
  •   
前后端联调的时候,你是不是等着后端把 API 接口写好之后才开始?或者,为了赶进度等不及后端的接口,自己在代码里先用定时器和 Promise 模拟后端返回的数据?又或者,你在项目中或者本地有一个 Mock 服务器,用它先来定义一些假的接口数据模拟异步请求?

现在我想告诉你的是,这些统统都不需要了!是的,你没听错,不需要你在业务代码中模拟数据,也不需要你用 Mock 服务模拟接口请求和数据,第三方库也可以统统丢掉!用这个方法能让你立刻进入开发,只需要提前和后端协商好数据结构即可!

没错,就是我们每天都要用到的 Chrome 浏览器。这是 Chrome 中隐藏的一个超强功能,而且绝大多数前端开发都不知道。今天我们就来实践一下,Chrome 到底是如何做到模拟后端 API 数据的。

首先开启 Chrome DevTools
这一步大家都知道,按键盘上的 F12 就能唤起 Chrome 的控制台,控制台中的那些标签页中有几个是我们频繁使用到的,比如:元素、控制台、网络、应用。你不妨猜一下,哪个标签页中的功能可以实现模拟 API 数据呢?聪明如你,肯定才出来了,答案就是“网络”标签页。

随便找个网站先,然后打开控制台,切换到“网络”标签页:

随便找个接口,鼠标左键点一下,在“预览”选项卡中就能看到这个接口返回的数据:

那么好,我们就修改一下这个接口返回的数据,我们把作者和书名给它改了。也就是相当于我们在本地模拟并修改这个接口的返回值。

鼠标右键点击左侧的这个接口,在弹出的菜单中选择“替换内容”:

之后控制台上方会出现一个选择文件夹的提示:

点击“选择文件夹”,在你电脑上随便找个位置,我这里在创建了一个“chrome_mock_api”的文件夹,就选它了:

之后,Chrome 还会跟你要个权限,如图:

给它个面子,让它“允许”。现在,控制台会从“网络”选项卡自动切换到“源代码/来源”选项卡:

编辑这个文件的内容,就可以拦截刚才我们看到的那个接口返回值了。如果想要一个好的编辑体验,还可以对文件内容格式化。看下面的动图,来演示一下:

怎么样,是不是省下了部署 Mock 服务或者配置第三方 Mock 库的时间了。

这是针对后端已经发布的 API 接口来模拟的场景,还有一个最常见的需求:如果后端 API 还没发布,该怎么办?这也简单,刚才 Chrome 不是让我们选择了一个文件夹吗,我们在那个文件夹里创建一个新的文件,把要调试的数据放进去就行了。比如,要模拟一个 api.ituring.com.cn/api/User/books?page=1&size=10 接口:

简单的新建个接口文件,瞬间就搞定了,咱就说快不快吧。之前我还在本地搭建的 Koa 服务器上模拟接口数据呢,自从知道了 Chrome 的这个功能,简直不要太方便。除了模拟 API 的返回值,还能模拟、修改请求的 Header 信息,自己试一下哦,超方便。

今天的内容够干货吧,还不快快搞起来 ~
用户评论