从使用者角度追溯

对于开发者,以后台为例,定义接口的步骤如下:

  1. 配置
  • 预设presets
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. 业务接口定义
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 {
/**
* 分页列表
* https://yapi.iguming.net/project/4168/interface/api/831186
*/
greyRhinoList: serviceHelper.define<t.GreyRhinoListRes, t.GreyRhinoListParams>({
url: '/gapi/financeAdminJanusApi/greyRhino/queryForPage',
method: 'post',
}),
};

  1. 统一导出
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;

设计思路

  1. 底层core
  2. 端:小程序、web、node
  3. 适配层
  • 业务适配层preset : 将特殊请求逻辑、特定业务逻辑收到 preset 里
    • 钉钉小程序、微信小程序、后台
  • 端是适配层adapter : 为暂不支持的 JS 运行环境适配请求库
    • 小程序、Web 端、支持 fetch 请求的环境、Node 环
  1. 表象层:导出给业务使用的方法

alt text

架构图

标准 request 请求库在设计上使用了分层架构设计,每层架构职责明确,以满足一套代码全端适用的诉求。

核心层:只提供基础能力和扩展机制,约束并标准化 请求配置、响应数据结构、错误处理
适配层:在不同的运行环境使用不同的 request 实现,以支持多端运行
预设规则:收敛各端的通用配置项、请求逻辑、业务逻辑、请求规范落地 等
支撑场景:目前已支持的业务场景,未来支持的业务场景(虚线框所示)

alt text

请求流程图

alt text