基于 wx.request 封装类似axios的拦截器

最新推荐文章于 2024-09-23 00:52:49 发布

原创

最新推荐文章于 2024-09-23 00:52:49 发布 · 842 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

该博客介绍了如何在微信小程序的开发过程中，由于wx.request不支持axios样式的请求和响应拦截，作者选择自定义一个HttpClient类来实现这一功能。通过定义请求方式、请求入参类以及请求和响应拦截器，作者创建了一个完整的HTTP客户端，包括GET、HEAD、POST等请求方法，并提供了使用示例。同时，还展示了如何设置请求拦截器（如添加授权头）和响应拦截器（如处理不同状态码的响应）。

在开发微信小程序的过程中，因为在接口发送请求需要对请求入参进行统一加密,但是wx.request没有提供类型axios的请求拦截和响应拦截方式,所以觉得自己封装一个。

// 请求方式
export enum HttpMethod {
  GET = "GET",
  HEAD = "HEAD",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE",
  OPTIONS = "OPTIONS",
  TRACE = "TRACE",
  CONNECT = "CONNECT"
}

/// 请求入参
class RequestMessage {
  Api:string;
  Param: any;
  Method: HttpMethod;
  Header: Object;
  constructor(api:string,param:any,method:HttpMethod = HttpMethod.GET,header:any = null){
    this.Api = api;
    this.Param = param;
    this.Method = method;
    this.Header = header;
  }
}

/**
 * HttpClient 实例
 */
class HttpClient {
  private RequestInterceptor: Function | undefined;
  private ReponseInterceptor: Function | undefined;
  private baseUrl: string;
  constructor(baseUrl:string = ''){
    this.baseUrl = baseUrl;
  }
  
  /** 请求拦截器 */
  public UseRequestInterceptor(interceptor:(requestMessage: RequestMessage) => boolean): HttpClient {
    this.RequestIntercept