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

  • 请求中断
  • ...
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值