【React】怎么解决后端接口数据与前端数据的适配问题?

大概所有的 React 开发经常会遇到的问题是:

  • 前端同学:后端又改字段了,我好多地方都用了,我得一个一个改啊?
  • 前端同学:你们几个后端,都返回的啥啊?一个用驼峰式命名法;一个用下划线命名法;还有用帕斯卡命名法的;能不能统一一下?
  • 前端同学:怎么这个接口数据包在 data 里,另一个接口又包在 list 里,有毛病啊?
  • ...

后台 API 返回值和组件数据结构很多时候并不是能很好地匹配。毕竟,前端和后端之间的开发是分开进行的,因此它们的数据结构不匹配是不可避免的。

虽然这也可以通过前端后端之间建立一些接口规范来解决。但很多时候,你又不能保证每个人都能贯彻到位。或者遇到一些比较奇葩的人,而你又是个弱势的小前端,你也没法去 battle 啊,那怎么办?只能自己动手,丰衣足食了呗。

这时,我们就可以应用名为适配器(Adapter)的设计模式。适配器是一种设计模式,它允许我们将某个对象 "适配" 到另一个对象的结构中。

适配器是一种结构设计模式,允许接口不兼容的对象进行协作。有兴趣可以看看这篇:adapter

这种设计模式有很多种实现方式。因此,无论你想采用哪种方法,都没有问题。只要主要目的是接受输入并在此基础上产生新的输出。这样就可以了!

🤔 问题

假设我们有这样一个后台 API 响应:

然后我们就有了这个接受不同 props 的 React 组件。

在此示例中,通知组件接受不同的 props,并期望在 statusTexttypeText 上使用不同的值。我们如何才能在不对组件或后台 API 响应进行大量重构的情况下匹配它们呢?

💡 适配

为了匹配或适配来自后台 API 响应的 React 组件,我们可以这样创建适配器:

然后是通知适配器:

正如你所看到的,我们现在正在 "调整 "后台 API 响应,以适应通知组件。

我们还为 FE 添加了一些额外的逻辑映射,如 statusTexttypeText

由于笔者大多数项目中都使用了 react-query 这个服务端状态管理工具,所以,上面演示的是如何将适配器与 react-query 结合使用!我们使用 react-query 的 select 方法将原始数据 "适配" 为我们需要的数据。

当然,这并不局限于 react-query,也可以应用于简单的获取 API 调用,或者任何你用来从后台获取数据的方法!这是一种灵活的处理数据映射的方式,而且不会在组件层面造成太多干扰。


相关推荐
y先森12 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy12 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891115 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端