从使用者角度追溯
对于开发者,以后台为例,定义接口的步骤如下:
- 配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| import { request, ServiceHelper } from '@guming/request'; import { presetMars } from '@guming/request-preset-mars';
const access_token = localStorage.getItem('token');
export const http = request.create({ presets: [presetMars()], headers: { Authorization: access_token ? `Bearer ${access_token}` : '', }, });
export const serviceHelper = new ServiceHelper({ http });
|
- 业务接口定义
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| import * as t from './type';
import { serviceHelper } from '../helper';
export default {
greyRhinoList: serviceHelper.define<t.GreyRhinoListRes, t.GreyRhinoListParams>({ url: '/gapi/financeAdminJanusApi/greyRhino/queryForPage', method: 'post', }), };
|
- 统一导出
1 2 3 4 5 6 7 8 9
| import { ServiceHelper } from '@guming/request'; import abnormityRecord from './abnormity-record';
const service = ServiceHelper.merge( abnormityRecord, );
export default service;
|
设计思路
- 底层core
- 端:小程序、web、node
- 适配层
- 业务适配层preset : 将特殊请求逻辑、特定业务逻辑收到 preset 里
- 端是适配层adapter : 为暂不支持的 JS 运行环境适配请求库
- 小程序、Web 端、支持 fetch 请求的环境、Node 环
- 表象层:导出给业务使用的方法
架构图
标准 request 请求库在设计上使用了分层架构设计,每层架构职责明确,以满足一套代码全端适用的诉求。
核心层:只提供基础能力和扩展机制,约束并标准化 请求配置、响应数据结构、错误处理
适配层:在不同的运行环境使用不同的 request 实现,以支持多端运行
预设规则:收敛各端的通用配置项、请求逻辑、业务逻辑、请求规范落地 等
支撑场景:目前已支持的业务场景,未来支持的业务场景(虚线框所示)
请求流程图