大前端中如何更優雅的編寫網絡請求層邏輯

前言

最近公司部分前端工程轉 typeScript 的實踐中，也嘗試了 ts 的寫法，諸如依賴注入、控制翻轉、註解等。這些概念在 Java 等後端開發中應用可能更爲普遍，但也不影響在前端領域的嚐鮮。最終的寫法以下；html

依賴注入：前端

export default class DataQuery extends VueComponent {
    @Inject('baseWebDataService')
    public baseWebDataService!: BaseWebDataService;

    @Inject('stationUtilService')
    public stationUtilService!: StationUtilService;

    @Inject('configService')
    public configService!: ConfigService;
}

複製代碼

網絡請求：java

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;
    }
}

複製代碼

今天的文章中來分享一下如何基於註解（裝飾器）的方式來編寫網絡請求層，其中的代碼已提交到源碼感興趣的同窗能夠參考參考。node

基於代碼也打包了 npm 插件 @canyuegongzi/decorator-http-template。ios

插件使用git

前置知識

裝飾器

裝飾器（Decorator）是一種與類（class）相關的語法，用來註釋或修改類和類方法。許多面向對象的語言都有這項功能。github

javaScript 對於元編程的支持尚不如 ts 完善，所以以 typeScript 來開發此插件。web

ts 中裝飾器大體分爲類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器。typescript

類裝飾器

此類裝飾器能夠是普通裝飾器（沒法傳參）也能夠是工廠模式（能夠傳參），工廠模式甚至能夠直接重載整個類，ts 中的類型約束以下。npm

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+ 的版本已經支持它，你只須要：

npm i reflect-metadata --save 並在入口文件中 import 'reflect-metadata'
在 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 的概念在此處不做詳細使用介紹，不過找了幾篇文章，能夠參考下：

開始

有以前的前置知識後，如今能夠正式開始插件了。

網絡請求方法裝飾器

經過裝飾器方式編寫網絡請求層。一樣須要實現 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 來設置網絡請求的參數。

class Test {
    /** * 獲取數據查詢 * @protected */
    @HttpGet('/data-search/list')
    @HttpHeader(['Content-Type: application/json'])
    protected async getDataList(@HttpParams() queryDataParams: QueryDataParams, @HttpRes() res?: any) {}   
}
複製代碼

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);
        })
    })
}
複製代碼

備註

web 和 node 端能夠採用一樣的方式請求數據；
裝飾器只能裝飾類或者類成員亦或者是類成員函數的參數。

最後

最後貼一下源碼源碼文章篇幅有限，不能對實現的每個註解進行講解，感興趣的同窗能夠先下載插件感覺感覺。也歡迎各位在評論區一塊兒討論其餘的實現方式。