})
}
}
使用语义化的异步函数
methods: {
async getUserPageData() {
try {
const res = await api.get(‘/usercenter/user/page?pageNo=1&pageSize=10’)
// 业务代码…
const { result } = res;
} catch(error) {
// 失败的情况写在catch中
}
}
}
-
语义化程度有限，调用接口还是需要查询接口
url -
前端
api层难以维护，如后端接口发生改动，前端每处都需要大改。 -
如果
UI组件的数据模型与后端接口要求的数据结构存在差异，每处调用接口前都需要进行数据处理，抹平差异，比如[1,2,3]转1,2,3这种（当然，这只是最简单的一个例子）。这样如果数据处理不慎，调用者出错几率太高！ -
难以满足特殊化场景，举个例子，一个查询的场景，后端要求，如果输入了搜索关键词
keyword，必须调用/user/search接口，如果没有输入关键词，只能调用/user/page接口。如果每个调用者都要判断是不是输入了关键词，再决定调用哪个接口，你觉得出错几率有多大，用起来烦不烦？ -
产品说，这些场景需要优化，默认按创建时间降序排序。我擦，又一个个改一遍？
-
…
那么怎么解决这些问题呢？请耐心接着看…
=================================================================================
我想到的方案是在底层封装和调用者之间再增加一层API适配层（适配层，取量身定制之意），在适配层做统一处理，包括参数处理，请求头处理，特殊化处理等，提炼出更语义化的方法，让调用者“傻瓜式”调用，不再为了查找接口url和处理数据结构这些重复的工作而烦恼，把ViewModel层绑定的数据模型直接丢给适配层统一处理。
首先，为了对齐后端微服务架构，在前端将API调用分为三个模块。
├─api
index.js axios底层封装
├─base 负责调用基础服务,basecenter
├─iot 负责调用物联网服务,iotcenter
└─user 负责调用用户相关服务,usercenter
每个模块下都定义了统一的微服务命名空间，例如/src/api/user/index.js：
export const namespace = ‘usercenter’;
每个功能特性都有独立的js模块，以角色管理相关接口为例，模块是/src/api/user/role.js
import api from ‘…/index’
import { paramsFilter } from “@/utils/helper”;
import { namespace } from “./index”
const feature = ‘role’
// 添加角色
export const addRole = params => api.post(/${namespace}/${feature}/add, paramsFilter(params));
// 删除角色
export const deleteRole = id => api.deletes(/${namespace}/${feature}/delete, { id });
// 更新角色
export const updateRole = params => api.put(/${namespace}/${feature}/update, paramsFilter(params));
// 条件查询角色
export const findRoles = params => api.get(/${namespace}/${feature}/find, paramsFilter(params));
// 查询所有角色，不传参调用find接口代表查询所有角色
export const getAllRoles = () => findRoles();
// 获取角色详情
export const getRoleDetail = id => api.get(/${namespace}/${feature}/detail, { id });
// 分页查询角色
export const getRolePage = params => api.get(/${namespace}/${feature}/page, paramsFilter(params));
// 搜索角色
export const searchRole = params => params.keyword ? api.get(/${namespace}/${feature}/search, paramsFilter(params)) : getRolePage(params);
-
每一条接口都根据
RESTful风格，调用增（api.post）删（api.deletes）改（api.put）查（api.get）的底层方法，对外输出语义化方法。 -
调用的
url由三部分组成，格式：/微服务命名空间/特性命名空间/方法 -
接口适配层函数命名规范：
-
- 新增：
addXXX
- 新增：
-
删除：
deleteXXX -
更新：
updateXXX -
根据ID查询记录：
getXXXDetail -
条件查询一条记录：
findOneXXX -
条件查询：
findXXXs -
查询所有记录：
getAllXXXs -
分页查询：
getXXXPage -
搜索：
searchXXX -
其余个性化接口根据语义进行命名
-
语义化程度更高，配合
vscode的代码提示功能，用起来不要太爽！ -
迅速响应接口改动，适配层统一处理
-
集中进行数据处理（对于公用的数据处理，我们用
paramsFilter解决，对于特殊的情况，再另行处理），调用者安心做业务即可 -
满足特殊场景，佛系应对后端和产品朋友
-
针对上节提到的关键字查询场景，我们在适配层通过在入参中判断是否有
keyword字段，决定调用search还是page接口。对外我们只需暴露searchRole方法，调用者只需要调用searchRole方法即可，无需做其他考虑。
export const searchRole = params => params.keyword ? api.get(/${namespace}/${feature}/search, paramsFilter(params)) : getRolePage(params);
- 针对产品突然加的排序需求，我们可以在适配层去做默认入参的处理。
首先，我们新建一个专门管理默认参数的js，如src/api/default-options.js
// 默认按创建时间降序的参数对象
export const SORT_BY_CREATETIME_OPTIONS = {
sortField: ‘createTime’,
// desc代表降序，asc是升序
sortType: ‘desc’
}
接着，我们在接口适配层做集中化处理
import api from ‘…/index’
import { SORT_BY_CREATETIME_OPTIONS } from “…/default-options”
import { paramsFilter } from “@/utils/helper”;
import { namespace } from “./index”
const feature = ‘role’
export const getRolePage = params => api.get(/${namespace}/${feature}/page, paramsFilter({ …SORT_BY_CREATETIME_OPTIONS, …params }));
SORT_BY_CREATETIME_OPTIONS放在前面，是为了满足如果出现其他排序需求，调用者传入的排序字段能覆盖掉默认参数。
一个完善的API层设计，肯定是离不开mock的。在后端提供接口之前，前端必须通过模拟数据并行开发，否则进度无法保证。那么如何设计一个跟真实接口契合度高的mock系统呢？我这里简单做下分享。
- 首先，创建
mock专用的axios实例
我们在src目录下新建mock目录，并在src/mock/index.js简单封装一个axios实例
// 仅限模拟数据使用
import axios from “axios”
const mock = axios.create({
baseURL: ‘’
});
// 返回状态拦截
mock.interceptors.response.use(
response => {
return Promise.resolve(response.data)
},
error => {
return Promise.reject(error.response)
}
)
export default mock
mock同样也要分模块，以usercenter微服务下的角色管理mock接口为例
├─mock
index.js mock底层axios封装
├─user 负责调用基础服务,usercenter
├─role
├─index.js
我们在src/mock/user/role/index.js中简单模拟一个获取所有角色的接口getAllRoles
import mock from “@/mock”;
export const getAllRoles = () => mock.get(‘/static/mock/user/role/getAllRoles.json’)
可以看到，我们是在mock接口中获取了static/mock目录下的json数据。因此我们需要根据接口文档或者约定好的数据结构准备好getAllRoles.json数据
{
“success”: true,
“result”: {
“pageNo”: 1,
“pageSize”: 10,
“total”: 2,
“list”: [
{
“id”: 1,
“createTime”: “2019-11-19 12:53:05”,
“updateTime”: “2019-12-03 09:53:41”,
“name”: “管理员”,
“code”: “管理员”,
“description”: “一个拥有部分权限的管理员角色”,
“sort”: 1,
“menuIds”: “789,2,55,983,54”,
“menuNames”: “数据字典, 后台, 账户信息, 修改密码, 账户中心”
},
{
“id”: 2,
“createTime”: “2019-11-27 17:18:54”,
“updateTime”: “2019-12-01 19:14:30”,
“name”: “前台测试”,
“code”: “前台测试”,
“description”: “一个拥有部分权限的前台测试角色”,
“sort”: 2,
“menuIds”: “15,4,1”,
“menuNames”: “油耗统计, 车联网, 物联网监管系统”
}
]
},
“message”: “请求成功”,
“code”: 0
}
- 我们来看看
mock是怎么做的
先看下真实接口的调用方式
import { getAllRoles } from “@/api/user/role”;
created() {
this.getAllRolesData()
},
methods: {
async getAllRolesData() {
const res = await getAllRoles()
console.log(res)
}
}
那么mock时怎么做呢？非常简单，只要将mock中提供的方法替代掉api提供的方法即可。
// import { getAllRoles } from “@/api/user/role”;
import { getAllRoles } from “@/mock/user/role”;
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
直到现在。**
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-bxLMbadc-1715879680740)]
[外链图片转存中…(img-oSzmIkNw-1715879680740)]
[外链图片转存中…(img-QhSKuaYe-1715879680741)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
扫一扫
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
