基于typeScript请求服务端的js-api-sdk 中的 filter

最新推荐文章于 2025-06-23 23:47:41 发布

原创最新推荐文章于 2025-06-23 23:47:41 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #typescript #filter #统一拦截

weex 同时被 3 个专栏收录

7 篇文章

订阅专栏

typeScript

5 篇文章

订阅专栏

开发协作工具（让BUG飞一会儿）

4 篇文章

订阅专栏

本文介绍了一种使用TypeScript进行API客户端封装的方法，通过构建apiClient实现对服务端请求的统一处理，包括前置和后置过滤器的设置，以及如何针对特定URI应用不同的过滤逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前有写过一篇基于typeScript请求服务端的js-api-sdk统一封装思路。
在这个基础上加了统一拦截处理，前置或后置处理，调用代码如下

      /**
       * 构建apiClient
       * @type {ApiClientFetch}
       */
      const apiClientFetch = ApiFetchBuild.registerFirstFilter({
          pattern: "/memberService/*", //表示匹配memberService下的所有uri
          filter: new NeedLoginFilter({
              getCurrentLoginMember: () => {
              },
              isLogin: () => {
              },
              saveMember: () => {
              }
          }),
          filterName: "NeedLoginFilter"
      }).registerLastFilter({
          pattern: "/*", //表示匹配所有
          filter: new NeedSignFilter(""),
          filterName: "NeedSignFilter"
      }).build();

      //或者

      ApiFetchBuild.registerFilter(
          [
              {
                  pattern: {
                      memberService: ["/getUser", "/getAccount", new RegExp("^/info/*")]
                  },//表示匹配memberService下的getUser，getAccount，info/*
                  filter: new NeedLoginFilter({
                      getCurrentLoginMember: () => {
                      },
                      isLogin: () => {
                      },
                      saveMember: () => {
                      }
                  }),
                  filterName: "NeedLoginFilter"
              },
              {
                  pattern(uri: string) {
                      return new RegExp("/*").test(uri);
                  }, //表示匹配所有
                  filter: new NeedSignFilter(""),
                  filterName: "NeedSignFilter"
              }
          ]
      ).build();

export default apiClientFetch;

Filter的定义

 /**
       * api filter
       */

export interface ApiFilter {

/**
 * 请求之前的处理
 * @param params 请求参数
 * @return {boolean | Promise<any>} 返回布尔值表示：是否继续处理下一个filter 返回Promise如果状态为fulfilled则继续往下处理
 */
preHandle(params: any): boolean | Promise<any>;

/**
 * 请求之后的处理
 * @param data 请求结果数据
 * @return {boolean} 是否继续处理下一个filter
 */
postHandle(data: any): boolean;

  }

这里做了web端的fetch的ApiClientFetch和基于阿里的weex版本的 ApiClientWeex

具体参见git