微信小程序 wx.request Typescript 封装统一请求

话不多说直接上代码，想懂的终究会懂，哈哈哈哈

文件名：request.ts 

  1 /**
  2  * HttpMethod 类型 api 处要用
  3  */
  4 export enum HttpMethod {
  5   Get = "GET",
  6   Post = "POST",
  7   Options = "OPTIONS",
  8   Put = "PUT",
  9   Delete = "DELETE",
 10 }
 11 
 12 /**
 13  * 请求参数接口
 14  */
 15 interface RequestConfig extends WechatMiniprogram.RequestOption {
 16   showMsg?: true,//显示错误信息
 17   auth?: Boolean,//是否需要鉴权
 18 }
 19 
 20 /**
 21  * 请求类
 22  */
 23 class HttpRequest {
 24   private static instance: HttpRequest;
 25   private constructor() { };
 26 
 27   /**
 28    * 实例
 29    */
 30   public static getInstance(): HttpRequest {
 31     if (!this.instance) {
 32       this.instance = new HttpRequest()
 33     }
 34     return this.instance
 35   }
 36 
 37   /**
 38    * 请求
 39    * @param option 
 40    */
 41   private request<T>(option: RequestConfig): Promise<T> {
 42     let _this = this;
 43     return new Promise((resolve, reject) => {
 44       const { url, method, data, dataType } = option;
 45       if (option.auth) {
 46         option.header = {
 47           "Authorization": "bearer token"
 48         }
 49       }
 50       wx.request({
 51         url, method, data, dataType,
 52         success(res: WechatMiniprogram.RequestSuccessCallbackResult) {
 53           const code = res.statusCode;
 54           const result = res.data as any;
 55           if (code === 200) {
 56 
 57             if (result.code == 200) {

　　　　　　　　　　　　//根据接口定义返回类型修改这里
　　　　　　　　　　　　//示例：{code:200,data:null,msg:'ok'}

 58               resolve(result.data) 
 59             } else {
 60 
 61               //处理业务异常
 62               wx.showToast({
 63                 title: result.msg,
 64                 icon: "none"
 65               })
 66 
 67             }
 68 
 69           } else if (code === 401) {
 70             //一些登出提示
 71             reject({ code, msg: "登录超时", data })
 72           } else {
 73             const msg = _this.handleErrorStatus(code, option);
 74             reject({ code, msg, data })
 75           }
 76         },
 77         fail(err: WechatMiniprogram.RequestFailCallbackErr) {
 78           _this.handleError(err, option);
 79           reject(err);
 80         }
 81       })
 82 
 83     })
 84   }
 85 
 86   /**
 87    * 服务异常处理
 88    * @param statusCode 
 89    * @param option 
 90    */
 91   private handleErrorStatus(statusCode: number, option: RequestConfig) {
 92     let msg = "服务找不到";
 93     if (statusCode === 502 || statusCode === 503) {
 94       msg = "服务开小差了~"
 95     }
 96     if (option.showMsg) {
 97       wx.showToast({
 98         title: `${msg},错误码:${statusCode}`,
 99         icon: "none"
100       })
101     }
102     return msg;
103   }
104   /**
105    * 请求失败处理
106    * @param err 
107    * @param option 
108    */
109   private handleError(err: { errMsg: string }, option: RequestConfig): string {
110     console.log(err, '异常请求');
111     let msg = "请求异常";
112     if (/timeout/.test(err.errMsg)) {
113       msg = "请求超时"
114     }
115     if (option.showMsg) {
116       wx.showToast({
117         title: msg,
118         icon: "none"
119       })
120     }
121     return msg;
122   }
123 
124   /**
125    * Get 请求
126    * @param url 
127    * @param data 
128    */
129   public Get<T = any>(url: string, data?: any, otherOption?: RequestConfig): Promise<T> {
130     return this.request<T>({ method: HttpMethod.Get, url, data, ...otherOption })
131   }
132 
133   /**
134    * Post 请求
135    * @param url 
136    * @param data 
137    */
138   public Post<T = any>(url: string, data?: any, otherOption?: RequestConfig): Promise<T> {
139     return this.request<T>({ method: HttpMethod.Post, url, data, ...otherOption });
140   }
141 
142   /**
143    * Delete 请求
144    * @param url 
145    * @param data 
146    */
147   public Delete<T = any>(url: string, data?: any, otherOption?: RequestConfig): Promise<T> {
148     return this.request<T>({ method: HttpMethod.Delete, url, data, ...otherOption })
149   }
150 
151   /**
152   * Put 请求
153   * @param url 
154   * @param data 
155   */
156   public Put<T = any>(url: string, data?: any, otherOption?: RequestConfig): Promise<T> {
157     return this.request<T>({ method: HttpMethod.Put, url, data, ...otherOption });
158   }
159 
160 }
161 
162 /**
163  * 单例请求实例
164  */
165 export const httpRquest = HttpRequest.getInstance()

 

posted @ 2023-12-05 09:05  崔国亮  阅读(289)  评论(0)  编辑  收藏  举报