大前端中如何更优雅的编写网络请求层逻辑

小咪咪 2022-10-17 05:51 108阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![da160fb600fb667ae3f3334ca13aa714.png][]

# 来源：残月公子 #

https://juejin.cn/post/6962496297991405576

## 前言 ##

最近公司部分前端工程转 typeScript 的实践中，也尝试了 ts 的写法，诸如依赖注入、控制翻转、注解等。这些概念在 Java 等后端开发中应用可能更为广泛，但也不影响在前端领域的尝鲜。最终的写法如下；

**依赖注入：**

export default class DataQuery extends VueComponent {
        @Inject('baseWebDataService')
        public baseWebDataService!: BaseWebDataService;
    
        @Inject('stationUtilService')
        public stationUtilService!: StationUtilService;
    
        @Inject('configService')
        public configService!: ConfigService;
    }
    
    复制代码

**网络请求：**

export default class DataQuery extends VueComponent {
        /**
         * 获取基础信息
         * @param params
         * @param res
         * @protected
         */
        @HttpGet('/basicinfo/tree')
        @HttpHeader(['Content-Type: application/json'])
        @HttpBaseUrl('http://127.0.0.1')
        protected async getBasicStationTreeData(@HttpParams() params: BasicStationForm, @HttpRes() res?: any) {
            // 在此处可以有自己的业务数据处理逻辑
            const queryKey: string = this.buildTempKeyByUrl(params);
            if (Array.isArray(res.data) && res.data.length) {
                RESOURCE_STATION_TREE_DATA.set(queryKey, res.data);
            }
            return res.data;
        }
    }
    
    复制代码

今天的文章中来分享一下如何基于注解（装饰器）的方式来编写网络请求层，其中的代码已提交到 源码 感兴趣的同学可以参考参考。

基于代码也打包了 npm 插件 `@canyuegongzi/decorator-http-template`。

![924231f2b2d1a3ac18e1bf9864fbb964.png][] npm

插件使用

## 前置知识 ##

### 装饰器 ###

> 装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。许多面向对象的语言都有这项功能。

javaScript 对于元编程的支持尚不如 ts 完善，因此以 typeScript 来开发此插件。

ts 中装饰器大致分为类装饰器、属性装饰器、方法装饰器、参数装饰器。

#### 类装饰器 ####

此类装饰器可以是普通装饰器（无法传参）也可以是工厂模式（可以传参），工厂模式甚至可以直接重载整个类，ts 中的类型约束如下。

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
    复制代码

**普通装饰器：**

此注解中 target 为 被修饰的类，在此可以扩展被修饰的类。

function log<T extends any>(target: T){
        // console.log(target)
    }
    
    @log
    class Test {}
    
    复制代码

**工厂模式**

此类注解返回函数，可以通柯里化的方式传递参数。

function log(params: any){
        return function<T extends any> (target: T) {}
    }
    
    @log('/login')
    class Test {}
    复制代码

#### 属性装饰器 ####

此类装饰器可以修饰类的成员属性，模式如类装饰器一样既可以是传统模式也可以采用工厂模式，此种装饰器在依赖注入中有大量的应用，ts 中的类型约束如下。

declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
    复制代码

export function Inject(id?: string): PropertyDecorator {
        return (target: Record<string, any>, propertyKey: string | symbol) => {
            // 在此出可以实现与依赖注入相关的逻辑
        };
    }
    
    class Test {
        @Inject('configService')
        public configService!: ConfigService;
    }
    复制代码

#### 方法装饰器 ####

此类装饰器可以重载类的成员函数，后续内容中会大量使用此类装饰器，此类装饰器存在三个参数，其一：target 为被修饰的类，其二：propertyKey是被修饰的成员函数的函数名，其三 descriptor 是被修饰的成员函数，在通常情况下可以通过 descriptor 参数重载此方法。ts 中的类型约束如下。

declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
    复制代码

以下代码实现一个简单的接口缓存装饰器。

const ExpriesMemoryCache = new Map();
    export function ApiCache(timeout = 120, keyArray = [],): MethodDecorator {
        return (target, name, descriptor) => {
            // 获取被修饰成员函数的原值
            const originalMethod = descriptor.value;
            // 重载此函数
            descriptor.value = async function (...args) {
                const argumentsArr = Array.from(arguments).concat(keyArray);
                let key = JSON.stringify(name, Array.from(new Set(argumentsArr)));
                let promise = ExpriesMemoryCache.get(key);
                if (!promise) {
                    // 缓存中没有该接口的缓存数据时通过originalMethod.apply 方式调用原函数请求数据
                    promise = await originalMethod.apply(null, arguments).catch(async error => {
                        ExpriesMemoryCache.delete(key)
                        return Promise.reject(error);
                    });
                    // 数据请求完成后将数据存入缓存，下一次调用该方式时直接从缓存中获取数据
                    ExpriesMemoryCache.set(key, promise)
                }
                return promise;
            };
            return descriptor;
    
        }
    }
    
    class Test {
        @ApiCache(120, [])
        public getData() {
            
        }
    }
    复制代码

以上代码实现了一个简易版的接口缓存注解，实现较为简陋，做的好的话可以继续扩展此函数，实现诸如定时缓存、竞速缓存等功能。

#### 参数装饰器 ####

此类装饰器主要用来注解类成员函数中参数，该装饰器有存在参数，其一：target 为 被修饰函数的所属类，其二：propertyKey 为被修饰的函数名，其三：parameterIndex 为参数的索引（第几个参数），该中装饰器在服务端开发中有大量的应用，如 Controller 层中查询参数的应用，ts 类型约束如下。

declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;
    复制代码

class Test {
      getInfo(@paramDecorator name: string, age: number) {
        console.log(name, age);
      }
    }
    
    function paramDecorator(target: any, method: string, paramIndex: number) {
        // target 为 Test 类
        // method 为 'getInfo'
        // paramIndex 为 0 被修饰的参数的参数索引
        console.log(target, method, paramIndex);
    }
    
    复制代码

### reflect-metadata ###

Reflect Metadata 是 ES7 的一个提案，它主要用来在声明的时候添加和读取元数据。TypeScript 在 1.5+ 的版本已经支持它，你只需要：

1.  `npm i reflect-metadata --save` 并在入口文件中 `import 'reflect-metadata'`
2.  在 tsconfig.json 里配置 `emitDecoratorMetadata` 选项

#### defineMetadata ####

当作 Decorator 使用，当修饰类时，在类上添加元数据，当修饰类属性时，在类原型的属性上添加元数据。

Reflect.defineMetadata(ReqMethodQuery, parameterIndex, target, propertyKey);
    复制代码

#### getMetadata ####

该 Api 用于获取target的元数据值, 会往原型链上找。

#### hasOwnMetadata ####

跟Object.prototype.hasOwnProperty类似， 是只查找对象上的元数据， 而不会继续向上查找原型链上的，如：

const reqQueryIndex: number = Reflect.getOwnMetadata(ReqMethodQuery, target, propertyKey);
    复制代码

#### 其他 ####

关于 reflect-metadata 的概念在此处不作详细使用介绍，不过找了几篇文章，可以参考下：

1.  掘金1
2.  reflect-metadata
3.  github

## 开始 ##

有之前的前置知识后，现在可以正式开始插件了。

### 网络请求方法装饰器 ###

通过装饰器方式编写网络请求层。同样需要实现 Get、Post、Delete、Patch。

此处只以 Post、Get 为例，核心方法 createHttpDecoratorFunction 在下一步实现。

/**
     * post post请求
     * @param url<string> 接口地址   /user/login
     * @param data<Object> 请求参数 一般参数都是动态参数，不会采用这中方式
     * @param options<string[] | string> 请求头部参数 建议直接使用HttpHeader 注解
     * @constructor
     */
    export function HttpPost(url: string, data?: any, options: string[] = []) {
        return createHttpDecoratorFunction('POST', url, data, options)
    }
    
    /**
     * post get请求  /user/list | /user/usrInfo/:id
     * @param url<string> 接口地址
     * @param data<Object> 请求参数 一般参数都是动态参数，不会采用这中方式
     * @param options<string[] | string> 请求头部参数 建议直接使用HttpHeader 注解
     * @constructor
     */
    export function HttpGet(url: string, data?: any, options: string[] = []) {
        return createHttpDecoratorFunction('GET', url, data, options)
    }
    复制代码

### 网络查询参数装饰器 ###

通过此类型装饰器可以实现网络请求的参数传递，效果如下：可以通过 HttpParams、HttpQuery、HttpPostData 来设置网络请求的参数。

HttpParams 和 HttpPostData 可以定义需要传递的参数，其实现方式参考了 nest 的使用方式，既可以将整个实体当作参数传递给后端接口，也可以通过对象字段标识只传递对象的一个属性。当通过此类装饰器装饰的成员函数，在代码编译阶段会先通过 Reflect.defineMetadata 绑定参数索引。方便在后续的函数调用中获取参数，也可以通过柯里化的方式保存参数供后续使用。此出代码只以 HttpParams 为例，其他 HttpPostData、HttpQuery 都是同样的道理，代码可以参考源码。

/**
     * 请求参数注解   @HttpParams()  | @HttpParams('id')
     * @param key 参数key,当存在此参数时，请求参数中只会包含此key的值， 大部分情况下适用于 user/:id  类接口， 默认发送全部参数
     * @constructor
     */
    export function HttpParams(key?: string) {
        return function (target: any, propertyKey: string | symbol, parameterIndex: number) {
            // 通过 Reflect.defineMetadata 定义元数据
            Reflect.defineMetadata(ReqMethodParams, parameterIndex, target, propertyKey);
            // 装饰器存在参数时 需要特殊绑定元数据
            if (key) {
                Reflect.defineMetadata(ReqMethodKeyParams, key, target, propertyKey);
            }
        }
    }
    复制代码

### HttpRes装饰器 ###

HttpRes 装饰器的核心作用是标识可以通过该参数可以拿到后端返回的数据。还是以之前的案例，getDataList 的第二个参数通过 HttpRes 修饰，在函数体内部就可以通过 res 获取后端返回的数据。

class Test {
        /**
         * 获取数据查询
         * @protected
         */
        @HttpGet('/data-search/list')
        @HttpHeader(['Content-Type: application/json'])
        protected async getDataList(@HttpParams() queryDataParams: QueryDataParams, @HttpRes() res?: any) {
            // 通过 res 可以拿到后端返回的Reponse, 不过这个 res 是 AxiosResponse 类型，默认情况下，函数体为空时。函数会返回该res.
            console.log(res.data);
        }   
    }
    复制代码

### HttpHeader装饰器 ###

HttpHeader 装饰器可以添加网络请求的头部参数，其参数既可以是字符类型也可以是字符集合。

/**
     * 请求头部
     * @param headers<string[] | string>
     * @constructor
     */
    export function HttpHeader(headers: string | string[]) {
        return headerDecoratorFactory(headers);
    }
    
    function headerDecoratorFactory(headers: string | string[]) {
        return function (target: any, propertyKey: string) {
            const headersConfig: string[] = typeof headers === 'string'? [headers]: headers;
            Reflect.defineMetadata(ReqMethodHeaders, headersConfig, target, propertyKey);
        }
    }
    复制代码

### HttpBaseUrl装饰器 ###

HttpBaseUrl 装饰器可以设置网络请求的前缀。

/**
     * 接口前缀地址
     * @param baseUrl<string> 接口地址
     * @constructor
     */
    export function HttpBaseUrl(baseUrl: string) {
        return function (target: any, propertyKey: string) {
            Reflect.defineMetadata(ReqHttpBaseUrl, baseUrl, target, propertyKey);
        }
    }
    复制代码

### createHttpDecoratorFunction ###

该方法是实现装饰器数据访问的核心方法，大概步骤也较为简单，重载被修饰的函数可以实现其功能：

1: 通过 getOwnMetadata 获取定义的元数据；2: 调用 axios 实现网络请求；3: 判断函数体是否为空，为空的请求下直接返回 Response，当存在函数体时会先用 apply 调用函数体，然后再结束掉函数。

/**
     * 创建请求装饰器
     * @param type<HttpTemplateMethod> 请求类型
     * @param url<String> 请求url
     * @param data<Object> 请求参数
     * @param options<Object> 配置
     */
    export const createHttpDecoratorFunction = (type: HttpTemplateMethod, url: string, data: any = {}, options: string[] = []) => {
        return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
            // 保存原方法的值，方便后续步骤通过 apply 调用函数
            const method: any = descriptor.value;
            descriptor.value = async function () {
                // 获取之前通过一系列注解定义的元数据，包括请求参数，baseUrl 等等
                const { reqDataKey, reqParamsKey, responseType, reqQueryKey, baseUrl, reqHttpTransform, requestConfig,reqParamsIndex,reqQueryIndex,resIndex,reqDataIndex } = getMetadata(target, propertyKey)
                try {
                    const args: Array<any> = [...arguments]
                    let query: any = {};
                    let params: any = {};
                    let postData: any = {};
                    let httpUrl = url;
                    // 当存在 HttpQuery 注解时 会拿到被 HttpQuery 注解的参数, 拿到 httpBaseUrl
                    // path 参数
                    if (reqQueryIndex >= 0) {
                      const dataObj = getHttpData(type, httpUrl, args[reqQueryIndex], reqQueryKey);
                      query = dataObj.data;
                      httpUrl = dataObj.httpUrl;
                    }
                    // 当存在 HttpParams 注解时 会拿到被 HttpParams 注解的参数 拿到 httpBaseUrl
                    if (reqParamsIndex >= 0) {
                        const dataObj = getHttpData(type, httpUrl, args[reqParamsIndex], reqParamsKey);
                        params = dataObj.data;
                        httpUrl = dataObj.httpUrl;
                    }
                    // post data数据
                    if (reqDataIndex >= 0) {
                        const dataObj=  getHttpData(type, httpUrl, args[reqDataIndex], reqDataKey);
                        httpUrl = dataObj.httpUrl;
                        postData = dataObj.data
                    }
                    // 处理请求 headers 
                    const requestHttpConfig: any = [...requestConfig, ...options]
                    const res: any = await requestData(type, baseUrl ? baseUrl + httpUrl: httpUrl, { query, params, postData}, requestHttpConfig, reqHttpTransform, responseType)
                    // 判断函数体是否为空
                    if (isEmptyFunction(method) || resIndex === undefined || resIndex < 0) {
                        return res;
                    }
                    // 处理参数 把 HttpRes 注解的参数直接替换为 后端返回的数据， 供 apply 调用
                    if (resIndex >= 0) args.splice(resIndex, 1, res)
                    return method.apply(this, args)
                } catch (error) {
                    console.warn(error);
                    throw error
                }
            }
        }
    }
    复制代码

getMetadata 方法较简单，直接获取一些列的元数据，当然也有更加简单的方法。

/**
     * 获取自定义数据配置
     * @param target
     * @param propertyKey
     *
     */
    function getMetadata(target: any, propertyKey: string ) {
        const resIndex: number = Reflect.getOwnMetadata(ResMethodKey, target, propertyKey);
        const reqQueryIndex: number = Reflect.getOwnMetadata(ReqMethodQuery, target, propertyKey);
        const reqParamsIndex: number = Reflect.getOwnMetadata(ReqMethodParams, target, propertyKey);
        const reqDataIndex: number = Reflect.getOwnMetadata(ReqMethodData, target, propertyKey);
        const reqDataKey: string = Reflect.getOwnMetadata(ReqMethodKeyData, target, propertyKey);
        const reqParamsKey: string = Reflect.getOwnMetadata(ReqMethodKeyParams, target, propertyKey);
        const reqQueryKey: string = Reflect.getOwnMetadata(ReqMethodKeyQuery, target, propertyKey);
        const reqHttpTransform: number = Reflect.getOwnMetadata(ReqHttpTransformRequest, target, propertyKey);
        const baseUrl: string = Reflect.getOwnMetadata(ReqHttpBaseUrl, target, propertyKey);
        const responseType: ResponseType = Reflect.getOwnMetadata(ResHttpResponseType, target, propertyKey);
        const requestConfig: string[] = Reflect.getOwnMetadata(ReqMethodHeaders, target, propertyKey) || [];
        return { reqDataKey, reqParamsKey, responseType, reqQueryKey, baseUrl, reqHttpTransform, requestConfig,reqParamsIndex,reqQueryIndex,resIndex,reqDataIndex}
    }
    复制代码

requestData 方法和普通的网络请求无差别，实现如下：

/**
     * http 请求实体
     * @param type
     * @param url
     * @param data
     * @param options
     * @param reqHttpTransform
     * @param responseType
     */
    export function requestData(type, url, data, options, reqHttpTransform, responseType) {
        return new Promise(async (resolve, reject) => {
            const { query, params, postData } = data;
            const config: any = getConfig(options);
            const requestData: any = {
                url: url,
                method: type,
                headers: config,
                params: params,
                data: postData,
                responseType: responseType || 'json'
            }
            // 存在数据转换器时，会在网络请求前调用该转换器
            if (reqHttpTransform) {
                reqHttpTransform['transformRequest'] = reqHttpTransform;
            }
            httpInstance.request(requestData).then((res: AxiosResponse) => {
                resolve(res);
            }).catch(e => {
                reject(e);
            })
        })
    }
    复制代码

## 备注 ##

1.  web 和 node 端可以采用同样的方式请求数据；
2.  装饰器只能装饰类或者类成员亦或者是类成员函数的参数。

## 最后 ##

最后贴一下源码 源码 文章篇幅有限，不能对实现的每一个注解进行讲解，感兴趣的同学可以先下载插件感受感受。也欢迎各位在评论区一起讨论其他的实现方式。

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[da160fb600fb667ae3f3334ca13aa714.png]: /images/20221014/f108a808188746b98c15a67493ce4cd0.png
[924231f2b2d1a3ac18e1bf9864fbb964.png]: /images/20221014/fb47be355b19406ea1fdac1db89bc2ac.png