请问前端如何抽离 model 层, 有没有 vue 相关的案例参考下

資深大佬 : jqtmviyu 10

场景:
1. 后端 api 返回的格式和字端可能不是前端展示需要的格式
2. 后端接口变化(结构 /字段), 涉及的多个前端页面可能也要改,改动量较大且琐碎
3. mock 定义的和实际的有差异
需求:
1. 请求->数据转换 /处理->数据流转->数据展示交互, 在请求和 vm 层再加一层处理
2. 不管后端返回什么格式 /字端, 统一处理成前端自己定义的
3. 后端接口变化, 只改 model 中间层
思考:
1. node.js 中间服务搞不了, 没人懂, 也没资源
2. Vuex 似乎有点那么意思, 我之前是在 getter 作处理, 但 Vuex 是用来状态管理和共享的, 把所有数据都交给 Vuex 不合适
3. 其他开发人员应该有类似的需求, 在站内也看到有人建了 serve 层处理接口的数据, 但我没搜到相关的 demo, 实践该怎么做没思路
求助内容:
1. 有相关的成熟案例可以参考吗? 最好是像 element, antDesignVue 这样的

大佬有話說 (12)

資深大佬 : lower

这种感觉是要后端处理，搞什么 VO DTO DO PO

資深大佬 : wunonglin

页面 => service <= 后端
对于数据的接收发送处理和转换，抽在 service 层处理

資深大佬 : wunonglin

说大白话就是发数据的时候在 service 把数据转成后台要的，接收的时候把后台散的数据处理成你页面要的

主資深大佬 : jqtmviyu

@wunonglin #3 有相关的案例可以参考吗? 对于 serve 层和 api 和页面之间的调用, serve 层的模块化, 和数据汇集和共享, 没什么思路. 如果是自己用, 随便几个 js 引入调用就完事了, 但我是想把它像 vueX 一样集成到框架里, 自己摸索出来的东西实在没信心在团队里一起用.

資深大佬 : wunonglin

@jqtmviyu #4
不太懂怎么解释。我截了一段代码你看看
https://i.loli.net/2021/09/01/TIzm1xYgShtyfjD.png

資深大佬 : wunonglin

@jqtmviyu #4
参考 ng 的 service 的概念咯。这个业务而已，没有框架的。
假如你数据不需要转换，那么在 service 直接把接收到的数据直接 return 就好了。
这样做也有好处就是如果后端改数据的话，我只需要改 service 而已，不需要每个调用的页面都要改。
另外你提到的 vuex 。不要把请求放 vuex 里，虽然可以，但是别。

資深大佬 : hackyuan

一，在 axios 的响应拦截进行规范处理
二，如分页接口，抽象为 useFetchPageData，中间逻辑自己补
三，数据被多处使用时将数据存储在 vuex，配合 getter 或 mutation 中处理
四，抽象个 util，对数据进行单独处理

資深大佬 : FreeEx

假设你要查询用户详情，不要直接查询接口拿到数据然后渲染页面，可以定义一个函数，返回对象是前端定义的用户详情 model，在这个函数里面调用接口来查询数据，然后转换后端返回的数据为前端定义的用户详情 model 。
这种写法是后端使用广泛，因为会复用相关的函数，前端往往是某一个页面查询显示某一些数据，在其他地方用不到，也就省略了这一步，还一个原因就是 js 发的 xhr 请求是异步的，封装使用不太方便，但是现在 js 已经有 async await 了，问题已经不复存在了。

資深大佬 : TomVista

突然想起来这个东西 vue filter
https://cn.vuejs.org/v2/guide/filters.html

資深大佬 : libook

如果做 Web+App 跨平台支持的话，这个不能在前端做，因为 App 没法实时更新，所以很多企业的方案是前端+BFF+后端的方式，API 映射工作在 BFF 层做，确保后端不管怎么变，BFF 都能做相应处理来兼容前端各版本。

資深大佬 : keepeye

api 请求封装不就是干这个事情的吗？难道你直接在 methods 里调用 axios?

主資深大佬 : jqtmviyu

@keepeye #11 api 只是调用了 axios 实例传参, 是想再加多一层, 结合业务和页面, 对后端的数据进行组装