🤔️后端接口还没开发完，等接口的前端能做什么事情？## 前言 在平时开发的过程中，少不了与后端对接口的流程。比如说你要

前言

在平时开发的过程中，少不了与后端对接口的流程。比如说你要开发的是一个列表页面，那各种数据是强依赖于后端的。

这个时候你是简单先写写前端代码，等到后端接口出来之后再开始写逻辑；还是说自己在代码里 mock 数据？

有可能你一个迭代有 N 个需求，对接 N 个后端，后端他们自己也有 M 个需求，会有自己的优先级。可能他们会在提测 DDL 那天才把接口给你，那如果你对接的那几个后端都这么搞，可能会搞得你自己最后提测那天忙的飞起。

如何避免这种尴尬的情况？今天一起来讨论一下

案例

假设我们需要开发一个这样的表格页面，对于前端来说会有以下几点工作量：

• 表单字段搜索
• 分页信息变更后搜索
• 列表渲染

对于后端来说提供一个获取列表信息的接口即可。那么当后端没有给出接口的时候，我们要怎么独立开发上面的逻辑，并且能够提测的标准？

有一个很重要的前提就是，我们要提前跟后端定好接口文档，这件事情是在开发之前就需要确定好的。以上述的列表接口为例，我们就需要跟后端定好入参跟出参数。

可能接口的入参是：

{
  id?:number,
  name?:string,
  pageNo:number,
  pageSize:number
}

接口的出参是：

type ListItem {
  id:number,
  name:number,
  createTime:string,
  updateTime:string
}
type result {
  status:number,
  message:string,
  data:ListItem[]
}

当前后端约定好接口文档之后，就可以分别独立去开发，不需要互相依赖。当然，接口文档也不是一成不变的，可能在开发的过程中会有一些变化。

但是这些变化一般来说不会太大，这样就算文档有变化，我们也只需要在联调的时候稍作修改。而不是说等后端给我接口之后再去写逻辑，把大部分工作量都堆积在联调阶段。

Mock.js

对于一个获取数据的接口来说，后端还没给我们接口的时候，为了独立开发进行下去，我们就需要自己 mock 数据。这个时候就可以使用到 Mock.js 这个库。

它可以拦截 AJAX 请求并返回自定义的响应数据，从而模拟后端 API ，帮我们在没有真实后端服务的情况下进行开发和测试。

它也提供了灵活的配置选项，供我们 mock 各种各样的数据，这个各位感兴趣的话就到它的官方文档去看吧。

首先先安装 mock.js ，然后我们以上面定好的接口文档为例，生成一份 mock 数据试试看。

假设后端的url地址是：/api/user/list，这个当然也是要在定接口文档的时候定好。我们可以写出下面这样的代码：

const data = Mock.mock({
  status: 200,
  message: "success",
  "data|30": [
    {
      // 生成30个ListItem对象
      "id|+1": 1, // id自增，从1开始
      name: "@cname", // name是随机的中文名字
      createTime: "@datetime", // createTime是随机生成的日期时间
      updateTime: "@datetime", // updateTime是随机生成的日期时间
    },
  ],
});
Mock.mock("/api/user/list", "get", data);

  useEffect(() => {
    axios.get("/api/user/list").then((res) => {
      const data = res.data.data;
      setList(data);
    });
  }, []);

这样的话就能验证我们写的代码对于接口文档上的字段定义是否匹配了。但是如果是搜索或者分页切换的逻辑， mock 很难去做联动，我们也没必要去做这种联动。

我们只需要自己 check ，应该发起列表请求的时机，以及发起列表请求的时候，字段是否与接口文档匹配即可， console 打印一下就行。

这样等到后端把接口写完之后，我们把 mock 逻辑删掉，自己花点时间检查一下，没有问题就提测就行。

最后

本文主要简单介绍了一下，前端还没有接口时，如何独立开发的做法。如果你觉得有帮助的话，点点关注点点赞吧～