前端抽象化，打破框架枷锁:Http请求也许该一样

前言

个人博客原文地址

此文章并不适合初级前端来看，它是抽象的架构设计，需要一定的TS基础和抽象思维，若带着思考的读完本文章相信会让你感到充实

当然你也可以复制，然后在自己项目中去实现它，然后用起来

发送请求的库，和方法，有几种常用的，axios、fetch、uni.request等
通常我们会在一个文件中，写入大量长得几乎一模一样的函数，只是参数稍微改变，来储存大量请求函数
但是一旦使用的库变化了，这些或多或少，会有微调，如今我们将其抽象出来，让我们使用变统一，让其实现解耦合，达到更高的复用性和可维护性。

内容核心

1. 请求参数与响应数据
   规定好参数和数据的格式，是整个系统的基础。将这部分提出来，让它们独立于具体实现。这样，你就能在不同的请求库中保持一致性，避免重复造轮子。

2. 核心业务逻辑
   请求方法的核心逻辑是最重要的部分。它负责处理请求和响应，确保数据的正确性和完整性。同时请求的拦截器是最常用的功能，同样直接在这里抽象出来，以确定最重要的功能。

3. 责任链
   另外的就是一个责任链设计，为了在拦截器中加入多个独立的功能，避免在请求方法中加入大量的逻辑判断，避免💩山代码。

4. 插件
   而插件，则是要去实现责任链，让每个插件都使用责任链模式来链接，这样就能在请求方法中，轻松地添加、删除或修改插件，而不需要改动核心逻辑。你可以根据需要自由组合插件，形成不同的请求方式。比如，你可以有一个插件专门处理错误，一个插件专门处理缓存，还有一个插件专门处理重试等。这样，你就能根据实际需求灵活调整请求的行为，而不需要修改核心代码。

不过，这个插件的部分我写了三个示例，实际你可以自己来定义都有什么

5. 适配器
   适配器很适合这种实现不同的情况，比如你需要在不同的环境中使用不同的请求库，或者你需要在不同的请求库中使用相同的请求方式。适配器可以帮助你实现这些需求，让你的代码更加灵活和可扩展。当然你也可以采用工厂模式，工厂模式能让你获得更多自由度，适配器模式则是可以更简单，而且通常来说一个项目，只会使用一个请求库，所以适配器模式更适合这种情况。

宏观的整体依赖关系

涉及的设计模式

• 责任链模式:通过责任链模式，请求和响应的处理可以动态组合多个插件，增强扩展性和灵活性
• 适配器模式:通过适配器模式，可以在不同的请求库之间切换，而不需要修改核心逻辑代码

设计的TS抽象源码

这里是一个设计的抽象模型，你可以根据这个模型去实现你的路由导航系统。无视框架，甚至无视语言，只要你能实现这个模型，你就可以在任何地方使用这个请求系统。
其他平台不是ts语言怎么办？AI会出手，助你转译

如果你不想先看这些源码，而是想看看图像👇

// DTO
/**
 * HTTP 请求方法枚举
 */
export const enum RequestMethod {
    GET = "GET",
    POST = "POST",
    PUT = "PUT",
    DELETE = "DELETE",
    PATCH = "PATCH"
}

/**
 * 请求参数接口
 */
export interface RequestParams<T = any> {
    /** 请求的 URL */
    url: string;
    /** 请求方法 */
    method: RequestMethod;
    /** 请求头 */
    headers?: Map<string, string>;
    /** 请求体数据（可选） */
    data?: T;
    /** 查询参数（可选） */
    params?: Map<string, string>;
    /** 元信息（可选） */
    meta?: Map<string, any>;
}

/**
 * 响应数据接口
 */
export interface ResponseData<T = any> {
    /** 响应状态码 */
    status: number;
    /** 响应消息 */
    message: string;
    /** 响应数据 */
    data: T;
    /** 元信息（可选） */
    meta?: Map<string, any>;
}

// Core
import { RequestParams } from "./DTO";
import { ResponseData } from "./DTO";

/**
 * 请求方法接口
 */
export interface IRequestMethod {
    /**
     * 发起 HTTP 请求
     * @param params 请求参数
     * @returns 响应数据
     */
    <P,R>(params: RequestParams<P>): Promise<ResponseData<R>>;
}

/**
 * 请求拦截器接口
 */
export interface IRequestInterceptor {
    /**
     * 请求前的拦截处理
     * @param params 请求参数
     * @param options 可选配置
     * @returns 修改后的请求参数
     */
    beforeRequest(params: RequestParams, options?: any): Promise<RequestParams>;
}

/**
 * 响应拦截器接口
 */
export interface IResponseInterceptor {
    /**
     * 响应前的拦截处理
     * @param response 响应数据
     * @returns 修改后的响应数据
     */
    beforeResponse(response: ResponseData): Promise<ResponseData>;
}

/**
 * 责任链抽象类
 */
export abstract class DutyChain {
    /** 下一个责任链节点 */
    private nextDutyChain: DutyChain | null = null;

    /**
     * 设置下一个责任链节点
     * @param handler 下一个责任链节点
     * @returns 当前责任链节点
     */
    public setNext(handler: DutyChain): DutyChain {
        this.nextDutyChain = handler;
        return handler;
    }

    abstract  canUse(params: RequestParams | ResponseData): boolean
    /**
     * 执行责任链处理
     */
    abstract handler(): Promise<void>

    /**
     * 处理逻辑（抽象方法）
     * @param params 请求或响应参数
     */
    protected abstract process(params: RequestParams | ResponseData): Promise<void>;
}

// plugins
import { DutyChain } from "./Core";
import { RequestParams } from "./DTO";
import { ResponseData } from "./DTO";

/**
 * 重复请求插件
 */
export class RepeatRequest extends DutyChain {
    canUse(params: RequestParams | ResponseData): boolean {
        throw new Error("Method not implemented.");
    }
    /**
     * 处理重复请求逻辑
     * @param params 请求参数
     */
    protected async process(params: RequestParams): Promise<void> {
        // 实现重复请求逻辑
    }

    /**
     * 执行责任链处理
     */
    public async handler(): Promise<void> {

    }
}

/**
 * 请求认证插件
 */
export class RequestAuth extends DutyChain {
    canUse(params: RequestParams | ResponseData): boolean {
        throw new Error("Method not implemented.");
    }
    /**
     * 处理请求认证逻辑
     * @param params 请求参数
     */
    protected async process(params: RequestParams): Promise<void> {
        // 实现请求认证逻辑
    }

    /**
     * 执行责任链处理
     */
    public async handler(): Promise<void> {

    }
}

/**
 * 消息处理插件
 */
export class Message extends DutyChain {
    canUse(params: RequestParams | ResponseData): boolean {
        throw new Error("Method not implemented.");
    }
    /**
     * 处理消息逻辑
     * @param response 响应数据
     */
    protected async process(response: ResponseData): Promise<void> {
        // 实现消息处理逻辑
    }

    /**
     * 执行责任链处理
     */
    public async handler(): Promise<void> {

    }
}

//FrameworkAdapters
import { IRequestMethod } from "./Core";
import { IRequestInterceptor } from "./Core";
import { IResponseInterceptor } from "./Core";
import { DutyChain } from "./Core";

/**
 * 抽象请求适配器类
 */
export abstract class AbstractRequestAdapter {
    /** 请求方法实例 */
    public request: IRequestMethod;
    /** 请求拦截器实例 */
    private requestInterceptor: IRequestInterceptor;
    /** 响应拦截器实例 */
    private responseInterceptor: IResponseInterceptor;
    /** 请求责任链 */
    public requestDutyChain: DutyChain;
    /** 响应责任链 */
    public responseDutyChain: DutyChain;
    /** 错误责任链 */
    public errorDutyChain: DutyChain;

    /**
     * 初始化方法
     */
    public abstract init(): void;
}

//Application
import { AbstractRequestAdapter } from "./FrameworkAdapters";

/**
 * 异步操作基类
 */
export abstract class AsyncBase {
    /** 请求适配器实例 */
    public Requester: AbstractRequestAdapter;

    /**
     * 构造函数
     * @param Requester 请求适配器实例
     */
    constructor(Requester: AbstractRequestAdapter) {
        this.Requester = Requester;
    }
}

// Demo
import { AsyncBase } from "../Application";
import { RequestMethod } from "../DTO";

export class Login extends AsyncBase {
  request = this.Requester.request;
  login(data: any) {
    return this.request<string,Record<string,any>>({
      url: "/login",
      method: RequestMethod.POST,
      data
    });
  }
}

图像也许会帮你更好的理解

流程图

类图

以下uml图，可以帮你快速的理解我这里的依赖关系，他是单向的，高层策略和低层策略是很明显的。

你可以右键下面这个图，在新的标签页中打开，这样可以放大和拖动的查看

这部分源码，我放到了github中，请去那边看吧👆