如何优雅的实现前端请求Mock

1、如何优雅的实现前端请求mock背景 在我们前端的日常工作中，难免需要哀求后端的接口猎取数据来举行页面的渲染，这个时候我们前端静态页面的开发以及相应的规律处理都与后端的接口休戚相关，所以绝大多数时候在新需求的前期，我们前后端需要统一一份接口文档，以此来作为各自开发的指导和约束。 接口定义好入参、返参之后我们就可以在前端自己mock数据举行相关的开发，比如有一个定义好的查询商品列表的接口，我们很自然的就能依据接口文档写出如下代码 / 定义api const getproducts = （）= return axios.get（&39;/products&39;） / 组件中用法 getproduc

2、ts（）。then（res= ductlist = res.data ） 但是在一开头，后端往往只是定义了一个接口格式，并没有实现其中的业务规律，或者是并没有部署，为了让页面有数据便利开发，我们可能会根据以下两种方式举行mock 修改定义api的部分 const getproducts = （）= return promise.resolve（ id:001,name:&39;商品1&39; ） 修改调用部分 getproducts（）。then（res= / ductlist = res.data ）。finally（）= ductlist =

3、 id:001,name:&39;商品1&39; ） 可以看出无论哪种方式，我们都要修改接口相关处的代码，等到接口真正可用时我们又得删除这一部分无用的mock代码，假如有几十个接口，重复的工作量大不说，而且简单遗漏，接下来我们就一起来尝试如何优雅实现前端mock 实践 由于目前公司项目普遍以vue为主，所以接下来的两个计划都是以vue/cli 4.x版本构建的项目举行介绍（react同理，配置webpack即可），http哀求用法的主流的axios 计划一 利用axios的adpter axios作为一款优秀的http库，能兼容在扫瞄器环境以及node环境发送http哀求，核心就是其内置adp

4、ter模块会按照运行环境在扫瞄器端用法xmlhttprequest，在node环境用法其内置http发起哀求，并且支持配置自定义adpter,计划一就从这里入手 从场景动身，我们在本地开发的时候是否需要用法mock明显是一个需要全局可控的操作，可以容易的举行开关，最合适的方式就是从脚本区别 添加dev:mock脚本，区别dev,开启全局mock / package.json "scripts": "dev": "vue-cli-service serve", "build": "vue-cli-servi

5、ce build", "dev:mock": "cross-env is_mock=true vue-cli-service serve", , cross-env帮我们处理兼容问题，向process.env中注入is_mock变量 修改webpack配置，省略其余不相关配置 / vue.config.js const is_mock = process.env.is_mock = &39;true&39; / 当运行dev:mock时为true module.exports = / 利用webpack defineplugin注入全局变量 c

6、hainwebpack: config = config.plugin（&39;define&39;）。tap（args= args0.is_mock = is_mock return args ） , 添加mock配置文件 module.exports = &39;/products&39;: code:0, data: id:001,name:&39;商品1&39; , message:&39;success&39;, 封装axios实例 import axios from "axios" / 读取mock配置 const mockmap = require（"

7、;xxxxxx/mock.js"）; / mock配置文件路径 var instance = axios.create（ adapter: （config） = / mock配置中匹配到当前url并且开启mock启用自定义adpter if（mockmapconfig.url && is_mock） return promise.resolve（ data: mockmapconfig.url, status: 200, ）; else / 否则调用默认的适配器处理，需要删除自定义适配器，否则会死循环 delete config.adapter; return axi

8、os（config）; , ）; export default instance 定义api采纳配置后的axios实例 / api.js import instance from &39;xxxx&39; / axios实例路径 export const getproducts = （）= return instance.get（&39;products&39;） 组件中用法 import getproducts from &39;api.js&39; getproducts（）。then（res= ductlist = res.data ） 用法这种计划后续只需要维护mock

9、.js文件，把接口文档相应的内容配置上就可以实现本地开发哀求的mock,可以运行dev或者dev:mock来打算是否启用mock * 这种模式类似于上面修改定义api的方式实现mock，便利之处在于可以全局统一处理，事实上并不会发送http哀求。 计划二 proxy + express 计划一虽然实现了容易的mock功能，但事实上思量一下还是有几处不够合理的地方： 并没有实际发送http哀求，对哀求的囫囵链路没有做到尽可能真切的模拟 依靠于axios库，其它http库能否实现以及实现是否像axios一样轻巧没有探索，因此可拓展性较差 功能耦合，mock作为一个额外的功能模块，把其嵌入到axio

10、s中处理，会使得axios变得略显臃肿 基于以上几个问题，于是有了用法express启动一个代理服务器，接收我们前端应用的哀求来举行mock相关的处理，模拟一个完整的http哀求闭环的主意 首先在项目根名目下新建一个server.js文件，用来写我们代理服务器的代码 const express = require（"express"）; / 引入mock配置文件 const mockmap = require（"./mock"）; const app = express（）; app.use（express.json（）; app.all（"*

11、", requestfilter, async （req, res, next） = const path = req; res.send（mockmappath）; ）; / 端口和 webpack prxoy中设置对应上，可以任意设置一个未被占用的端口 app.listen（"3306", （） = console.log（"serve is running at port 3306"）; ）; 通熟易懂，就是监听3306端口，拦截全部哀求，返回mock数据 修改webpack的proxy配置，使得运行mock脚本时，哀求打到我们的代理服务

12、器上，省略其余不相关配置 / vue.config.js const is_mock = process.env.is_mock = &39;true&39; / 当运行dev:mock时为true module.exports = devserver: / proxy: / 全部匹配/api的哀求会被转发到target &39;/api&39;: / 开启mock时 设置target为本地代理服务地址，这里端口3306与serve中监听端口保持全都 target: is_mock ? &39;http:/localhost:3306/&39; : &39;xxxxx&39;, ws: tru

13、e, changeorigin: true, pathrewrite: &39;/api&39;: &39;&39; , , 修改一下上文创建axios实例的代码instance.defaults.baseurl = "/api",设置一下全部哀求的baseurl，以此来使proxy配置匹配全部哀求 完成上述配置，我们重启前端应用，并且启动我们的服务端代码就可以用法mock功能了 ,我们可以修改一下脚本，便利当我们开启mock功能的时候自动启动serve服务 / package.json "scripts": "dev": "

14、;vue-cli-service serve", "build": "vue-cli-service build", "dev:mock": "cross-env is_mock=true vue-cli-service serve & node serve.js", , 其实到这里，mock的功能已经可用了，我们还可以基于现有的代码结合自身的需求的举行拓展 拓展 我在项目中用法的时候举行了一点点拓展，给大家提供一个拓展的参考 修改mock配置文件 module.exports = &39;/pr

15、oducts&39;: code:0, data: id:1, name:&39;商品1&39; , message:&39;success&39;, config: method:&39;get&39;, delay: 1000, validator:（request）= const error = status:400, msg:&39;请检查参数是否合法！&39; const success = status:200, msg:&39;success&39; / 假设该哀求需要一个必传参数 timestamp return request.query.timestamp ? succes

16、s : error , , 加了额外的config字段举行一些差异化配置，例如指定响应延时 1000ms 必传参数校验等 修改serve端代码 const express = require（"express"）; const mockmap = require（"./mock"）; const app = express（）; app.use（express.json（）; / 哀求过滤器 const requestfilter = （req, res, next） = const path,method = req; / 设置相应头 处理中文乱码 r

17、es.set（&39;content-type&39;, &39;text/plain&39;） / 404 提前过滤 if （！mockmappath） res.status（404）。end（）; / 哀求办法不匹配提前过滤 if（method != mockmappath.config?.method ? &39;get&39;） res.status（405）。end（&39;请检查哀求办法是否正确！&39;） / 自定义校验规章不匹配过滤 if （mockmappath.config && mockmappath.config.validator） const data = mockmappath.config.validator（req）; if （data.status != 200） res.status（data.status）。end（data.msg） settimeout（） = next（）; , mockmappath.config?.delay ?