前端独立交付需求背景下的Mock数据多方案解读

作者 | Iven 爱数AnyBackup灾备管理研发部-中级前端开发工程师

      在前后端分离的趋势下，前端开发逐步减少对后端的依赖，甚至可以不与后端进行联调，独立交付需求。在这样的背景下，首先要解决的就是接口数据的Mock，根据服务端约定好的接口进行数据Mock，同时修改数据来满足不同的开发场景。

一、请求流程介绍

      首先来分析下开发环境下请求的整个流程：

---

      发送请求流程：

      1. 操作页面时首先会经过编译后的源码，按照源码的逻辑进行请求封装，再发送请求

      2. 请求通过浏览器向目标地址发送请求，开发环境下目标地址为编译工具提供的前端服务器地址

      3. 编译工具接收到请求后，根据配置项对请求处理，处理完成后向后端服务器发送请求

---

      响应请求流程：

      1. 后端服务器接收请求后，匹配到对应的路由进行逻辑处理，并将结果返回

      2. 编译工具拿到结果，根据配置项内容进行处理，向浏览器返回处理后的结果

      3. 浏览器接收数据后，按照源码逻辑处理数据，将新的数据呈现在页面上

二、Mock解决方案

      按照请求在本地和服务器两端控制，我们将Mock方式分为本地Mock和服务器Mock：

---

      根据上述请求的整个流程，前端Mock数据的解决方案可以大致分为以下几种：

      1. 本地Mock

          1.1 逻辑嵌入

          1.2 源码请求拦截

          1.3 浏览器请求拦截

          1.4 代理封装

      2. 服务器Mock

          2.1 服务化

          2.2 代理拦截

          2.3 服务拦截

      我们以渲染一个列表为例，使用Axios获取接口数据：

// userlist.js 文件
import axios from 'axios'
const getUserList = async () => {
const users = await axios.get('/user/l