useResource声明式API与useMock基于依赖注入的mock工具

前不久组内的萌新用不知道从哪里学来的技术，说要封装一套 axios 库供大家使用。

等他开发完，在 code review 环节，大家看到他写的代码都面面相觑，不知道该如何评价。

我一时间也不知道该如何评价，只能提醒他不要写死代码，目前 axios 还没入选开源库，后期有可能换成其他替代品。

会后我专门到网上搜一番，发现二次封装 axios 的案例确实不少，但给我感觉其实都半斤八两，不见得哪个更优秀。

当时我们刚从Java切换到Go，由于Go对于 swagger 支持不够好，前后端对接的接口文档需要手写。

有时候后端修改了接口没有通知前端，经常遇到相互扯皮的事情。

我突发奇想，既然Go对注解、装饰器的支持很不好，前端的 typescript 语法跟 Java 十分相似，为什么不把Java那套照搬到前端？

不仅能解决前端接口封装的问题，还能规避go不支持swagger文档的问题。

useResource：声明式API

说干就干，我参考 Open Feign 的设计，Feign 的设计很大程度上借鉴了 Spring MVC 。

只是 Feign 主要面向客户端，而 Spring MVC 面向服务端，两者的注解大同小异，Feign 兼容后者而已。

interface GitHub {
  @RequestLine("GET /repos/{owner}/{repo}/contributors")
  List contributors(@Param("owner") String owner, @Param("repo") String repo);

  @RequestLine("POST /repos/{owner}/{repo}/issues")
  void createIssue(Issue issue, @Param("owner") String owner, @Param("repo") String repo);
}

显然这种声明式API的设计，比那些二次封装 axios 的方案优雅太多了，真正做到抽象接口与具体实现分离。

声明式API可以不改动业务代码的前提下，根据实际情况把具体实现在原生 fetch 和 axios 之间切换。

装饰器

其实说照搬Java的说法是不正确的，Typescript 只有装饰器的说法，并没有注解。

而且两者差别还挺大的，Java是先定义注解Annotation，然后在运行时通过反射获得注解的元数据metadata；

然而装饰器 Decorator 的做法就非常直接白，直接一次性把所有的事情做完了。

export type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "OPTION"

export interface Exchange {
    (...args: any[]): Promise
}

export interface Operation {
    method?: Method
    path?: string
    headers?: Record
    pathVariables: {name: string, order: number}[]
    requestBody?: {order: number, encode: (body: any) => BodyInit}
}

export interface Operations {
    [key: string]: Operation
}

export interface Resource {
    exchange: Exchange
    endpoint?: string
    resourceName?: string
    headers?: Record
    operations?: Operations
}

export const RESTfulHeader: Record = {
    "Content-Type": "application/json"
}

export function RESTful(endpoint: string, resource?: string, headers?: Record) {
    return function(target: T) {
        return class extends target {
            constructor(...args: any[]) {
                super(...args)
                this.endpoint = endpoint
                this.resourceName = resource
                this.headers = headers ? {...headers, ...RESTfulHeader} : {...RESTfulHeader}
            }
        }
    }
}

export function RequestMapping(method: Method, path: string, headers?: Record) {
    return function(target: Resource, methodName: string, descriptor: PropertyDescriptor) {
        if (!target.operations) {
            target.operations = {}
        }
        const op = target.operations[methodName] ?? {pathVariables: []}
        op.method = method
        op.path = path
        op.headers = headers
        target.operations[methodName] = op
    }
}

export function Get(path: string, headers?: Record) {
    return RequestMapping("GET", path, headers)
}

export function Post(path: string, headers?: Record) {
    return RequestMapping("POST", path, headers)
}

export function Put(path: string, headers?: Record) {
    return RequestMapping("PUT", path, headers)
}

export function Patch(path: string, headers?: Record) {
    return RequestMapping("PATCH", path, headers)
}

export function Delete(path: string, headers?: Record) {
    return RequestMapping("DELETE", path, headers)
}

export function Option(path: string, headers?: Record) {
    return RequestMapping("OPTION", path, headers)
}

export function PathVariable(name: string) {
    return function(target: Resource, propertyKey: string | symbol, parameterIndex: number) {
        if (!target.operations) {
            target.operations = {}
        }
        const methodName = String(propertyKey)
        const op = target.operations[methodName] ?? {pathVariables: []}
        const pv = {name: name, order: parameterIndex}
        op.pathVariables.push(pv)
        target.operations[methodName] = op
    }
}

export const PV = PathVariable

export interface Encoder {
    (src: T): BodyInit
}

export function RequestBody(encoder: Encoder) {
    return function(target: Resource, propertyKey: string | symbol, parameterIndex: number) {
        if (!target.operations) {
            target.operations = {}
        }
        const methodName = String(propertyKey)
        const op = target.operations[methodName] ?? {pathVariables: []}
        op.requestBody = {order: parameterIndex, encode: encoder}
        target.operations[methodName] = op
    }
}

export function JSONBody() {
    return RequestBody