微信小程序TypeScript请求封装(TS+request)，开箱即用

概要

之前一直使用js来写小程序，现在切换使用TypeScript模板来写，找了很久没有找到一个TypeScript的request请求，所以就有了下面这些代码。

目录结构

提示：这是在所需的所有文件

- miniprogram
    - api
        - index.ts
        - base.ts
        - system
            - userApi.ts
    - utils
        - request.ts

封装request

这是最关键的request.ts文件，这一步解决了请求也就完成了一大半，已经做好了如401等登录失效判断。

/**
 * @description: HTTP请求方法枚举
 */
export enum HttpMethod {
   
	GET = 'GET',
	POST = 'POST',
	OPTIONS = 'OPTIONS',
	PUT = 'PUT',
	DELETE = 'DELETE'
}

/**
 * @description: HTTP请求配置
*/
interface RequestConfig {
   
	/** API路径 */
	url?: string
	/** Method类型 */
	method?: HttpMethod
	/** 接口返回数据 */
	data?: any
	/** 无TOKEN触发异常捕获时，是否执行异常逻辑 */
	needToken?: boolean
	/** Header头部 */
	header?: object
	/** 返回的数据格式 */
	dataType?: string
	/** 请求报错时，是否弹出message提示（默认弹出）*/
	noShowMsg?: boolean
}

/**
 * @description: 声明业务数据类型
*/
export interface MyAwesomeData<T> {
   
	code: number
	msg: string
	data: T
}

class HttpRequest {
   
	private static instance: HttpRequest
	private constructor() {
    }
	/** 请求函数(单例模式)
	*
	* **注意：**
	* `method`需使用`HttpMethod`枚举类，切勿自行定义
	*
	* **示例代码**
	* ```js
	 HttpRequest.getInstance().request({
		 url: '/Api',
		 method: HttpMethod.GET
	 })
	* ```
	*/
	public static getInstance(): HttpRequest {
   
		if (!this.instance) {
   
			this.instance = new HttpRequest()
		}
		return this.instance
	}

	// 处理请求异常状态码
	private handerErrorStatus(statusCode: number, requestConfig: RequestConfig) {
   
		let msg = '服务找不到'
		if (statusCode === 502 || statusCode === 503) {
   
			msg = '服务器开小差了~'
		}