前端工程化-AOP在Genebox小程序网络请求上的应用

genebox-mini-request 是基于JS Decorator 和 Taro 实现的网络请求，使用TS实现，专注于实现对网络请求的使用优化。

背景

当前小程序端网络请求模块使用 request utils 统一处理，通过配置请求模块，动态生成 request task，并通过该实例发起请求。额外的 options 配置参数需要单独传入高阶函数，目前仅支持header，超时时长配置。

存在的问题：

• • 请求参数配置存在一定局限性，不易扩展
  • 请求模版的创建增加重复性代码
  • 请求模版配置与具体使用分离，维护查找不方便
  • 生成的请求方法不能跟踪定位到具体模版配置
  • 无法指定多个请求不同的 BASE URL
  • 请求模块代码耦合较重，扩展代码容易增加测试风险

优化方案

借鉴 Android Retrofit 的架构实现思想，结合 Mobx，使用 AOP + Decoration 方式对整个请求流程进行优化。

优势：

• • 去除请求配置模块，避免重复代码
  • 分离请求功能，各模块之间职责单一，降低耦合度
  • 使用装饰器注入方式，将请求配置与业务逻辑分离，高度解耦
  • 扩展新功能，只需关注请求封装内部代码，无需关注具体业务逻辑
  • 通过可插拔的方式提供更多的功能可能性，提高可扩展性
  • 请求配置与具体的业务方法结合，可以直观快捷的查看到具体配置
  • 提升代码可重用、可复用性，代码无侵入
  • 抽象响应体，保持对外接口数据一致性

核心实现

• RequestFactory

负责初始化配置，例如BaseURL，超时时长等，该类提供基础配置并分配到具体使用，数据由 RequestBuilder 提供。

• RequestBuilder

请求配置类，使用建造者模式实现。负责构建请求参数配置，例如BaseURL，超时时长等，并将配置提供给 RequestFactory 。

• RequestConfig

AOP实现，提供多种请求配置，例如 Header、Timeout、BaseUrl 等接口。

• RequestTask

对 Taro Request 的封装，接收来自 RequestTaskService 层传递的 配置参数，并注册给Taro Request，并对外提供Promise实现。

• RequestTaskService

Taro Request 的服务层，接收来自 RequestType 的基础配置参数，并对参数进行整合处理，生成Taro Request 对应的 Config 参数配置

• RequestType

AOP实现，提供多种请求方式选择，例如 GET、POST、PUT 等。对并将请求方式中声明的参数与请求方式 method 进行处理，生成 「 { url, method, params } 」结构， 传递到 RequestTaskService 层

功能支持

• • 请求方式
  • 请求头
  • 请求地址
  • 请求参数
  • 拦截器
  • 请求超时
  • 中断请求
  • Loading 提示
  • 抽象响应体
  • 响应数据类型
  • 请求响应返回值类型

使用方式

全局配置

import { 
  RequestBuilder,
  RequestFactory
} from "genebox-mini-request";


const request: RequestFactory = new RequestBuilder()
  .baseUrl("https://static.genebox.cn") // BaseUrl
  .timeOut(666666)                      // 超时时长
  .headers({                            // Header
    platform: 123
  })
  .enableLoading(false)                 // 是否开启Loading
  .addInterceptor(RequestInterceptor)   // 拦截器
  .enableLogInterceptor(true)           // 开启Log日志拦截器，默认关闭
  .enableTimeoutInterceptor(true)       // 开启请求超时拦截器，默认关闭
  .build();


  // setter
  // request.setBaseUrl("");
  // request.setHeaders({});
  // request.setTimeout(6666)

参数配置

import {
  GET,
  POST,
  BaseUrl,
  Headers,
  Timeout,
  DataType,
  Loading,
  ResponseType
} from "genebox-mini-request";


 
@Headers({'User-Agent1': 'request'})
@GET('/static/article/queue_rules.html')
@GET('/static/article/queue_rules.html/{ruleId}')
@GET('/static/article/queue_rules.html/{0}', 'arg')
@GET({url: '/static/article/queue_rules.html', params: {page: 1}})
getInfo(res, err) {
    // res => 服务端返回结果：ResponseBody
    // err => 程序异常错误
}

调用传参

// Restful Api 
ApiService.getInfo('ruleId=123456', {
  limit: 20
});


// 普通传参
ApiService.getInfo({
  limit: 20
})

TODO

• 请求中断
• ...