HTTP 装饰器模式

文档编辑：Tt.

1. 基本介绍

HTTP 装饰器模式，顾名思义，就是通过装饰器来对 HTTP 请求进行封装，从而实现 HTTP 请求的统一管理。装饰器 API 遵循 SpringBoot 命名习惯。

2. 使用效果

GanttProject.api.ts

import {
  AutoLog,
  GetMapping,
  PostMapping,
  PutMapping,
  DeleteMapping,
} from "/@/utils/http/decorator/http-deco-min";

// 必要部分 如下
export default class ApiClass {
  // 发送请求打印请求参数
  @AutoLog("甘特图列表")
  // 使用get方式请求，请求地址为/gantt/ganttProject/list
  @GetMapping("/gantt/ganttProject/list")
  static list(params): Promise<any> {
    return Promise.resolve(params) as Promise<any>;
  }

  @AutoLog("甘特图编辑")
  @PostMapping("/gantt/ganttProject/edit")
  static edit(params): Promise<any> {
    return Promise.resolve(params) as Promise<any>;
  }

  @AutoLog("甘特图添加")
  @PostMapping("/gantt/ganttProject/add")
  static add(params): Promise<any> {
    return Promise.resolve(params) as Promise<any>;
  }

  @AutoLog("甘特图删除")
  @DeleteMapping("/gantt/ganttProject/delete")
  static deleteOne(params): Promise<any> {
    return Promise.resolve(params) as Promise<any>;
  }

  @AutoLog("甘特图批量删除")
  @DeleteMapping("/gantt/ganttProject/deleteBatch")
  static batchDelete(params): Promise<any> {
    return Promise.resolve(params) as Promise<any>;
  }
  
  // 根据业务需求，需内部控制调用情况，可按如下方式进行封装
  @AutoLog("甘特图编辑保存")
  static saveOrUpdate(params, isUpdate): Promise<any> {
    return isUpdate ? ApiClass.edit(params) : ApiClass.add(params);
  }
}

// 非必要部分 如下

// 便于外部{ list, edit, add, saveOrUpdate, deleteOne, batchDelete }的引用
const list = ApiClass.list;
const edit = ApiClass.edit;
const add = ApiClass.add;
const saveOrUpdate = ApiClass.saveOrUpdate;
const deleteOne = ApiClass.deleteOne;
const batchDelete = ApiClass.batchDelete;
export { list, edit, add, saveOrUpdate, deleteOne, batchDelete };

GanttProject.vue

import { deleteOne } from "./GanttProject.api";

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({ id: record.id });
  handleSuccess();
}

3. 使用方式

将下述两个文件拷贝到项目中，并按需引入

http-adepter.ts

// 具体项目具体引用
import { defHttp } from "../axios";

// 需将post等请求方式对应上
export function postRequeset(url: string, params: any, options?: any) {
  return defHttp.post({ url: url, params }, options);
}
export function getRequeset(url: string, params: any, options?: any) {
  return defHttp.get({ url: url, params }, options);
}
export function putRequeset(url: string, params: any, options?: any) {
  return defHttp.put({ url: url, params }, options);
}
export function deleteRequeset(url: string, params: any, options?: any) {
  return defHttp.delete({ url: url, params }, options);
}

export default {
  postRequeset,
  getRequeset,
  putRequeset,
  deleteRequeset,
};

http-decorator.ts

/**
 * Author: Tt.
 * Date: 2024-08-10 14:25:25
 * Description: 装饰器核心部分，非必要勿改动
*/
import { getRequeset, postRequeset, putRequeset, deleteRequeset } from "./http-adepter";
export function AutoLog(value: string = '') {
    return function (target, propertyName, descriptor) {
        const defaultMethod = descriptor.value;
        descriptor.value = function (...args) {
            console.log(value + "->", args);
            return defaultMethod.apply(this, args);
        }
    }
}
export function GetMapping(url) {
    return function (target, propertyName, descriptor) {
        const defaultMethod = descriptor.value;
        descriptor.value = async function (...args) {
            const params = await defaultMethod(...args);
            return getRequeset(url, params);
        }
    }
}
export function PostMapping(url) {
    return function (target, propertyName, descriptor) {
        const defaultMethod = descriptor.value;
        descriptor.value = async function (...args) {
            const params = await defaultMethod(...args);
            return postRequeset(url, params);
        }
    }
}
export function PutMapping(url) {
    return function (target, propertyName, descriptor) {
        const defaultMethod = descriptor.value;
        descriptor.value = async function (...args) {
            const params = await defaultMethod(...args);
            return putRequeset(url, params);
        }
    }
}
export function DeleteMapping(url) {
    return function (target, propertyName, descriptor) {
        const defaultMethod = descriptor.value;
        descriptor.value = async function (...args) {
            const params = await defaultMethod(...args);
            return deleteRequeset(url, params);
        }
    }
}