如何使用TypeScript封装一个简单好用的Http工具

前言

Http 请求对于任何系统都是一大基石，那么如何封装一个高可用的 Http 请求工具呢？接下来手把手教你使用 TypeScript 封装一个高可用的 Http 请求工具。

本工具由三部分构成：Http基础层、基础方法层、业务层。

Http基础层

Http基础层主要用于统一处理错误和防抖。

防抖主要使用CancelToken来取消相同时间内的重复请求，通过Map对象来记录请求，在请求拦截器中取消重复请求，响应结束则删除请求记录。根据请求url&method&params&data

来判断是否是重复请求，并对一些特殊请求，设置白名单，不做去重处理。

import axios, {AxiosRequestConfig,AxiosResponse,AxiosError,AxiosInstance,
} from 'axios'
// 取消请求
const CancelToken = axios.CancelToken

interface HttpParams {BASEURL?: stringTIMEOUT?: numbererrorHandler?: (error: AxiosError, ctx?: AxiosInstance) => voidisCancel?: boolean
}

const cancelMap = new Map()
export default class Http {instance: AxiosInstanceconstructor({BASEURL,TIMEOUT = 1000 * 60 * 10,errorHandler = () => void 0,isCancel = true,}: HttpParams) {// 创建实例this.instance = axios.create({baseURL: BASEURL,timeout: TIMEOUT,withCredentials: true,})// 拦截请求this.instance.interceptors.request.use((config: AxiosRequestConfig) => {if (isCancel) {const key = uniqueKey(config)// if exists, abort itcancelHandler(key)if (!config.cancelToken && key) {config.cancelToken = new CancelToken((cancel) => {cancelMap.set(key, cancel)})}}return config},(error: AxiosError) => {if (!axios.isCancel(error)) {errorHandler(error, this.instance)return Promise.reject(error)}})// 拦截响应this.instance.interceptors.response.use(({ config, data, headers }: AxiosResponse) => {if (isCancel) {const key = uniqueKey(config)if (cancelMap.has(key)) {cancelMap.delete(key)}}if (config.method === 'head') {return Promise.resolve(headers)}return Promise.resolve(data)},(error: AxiosError) => {if (!axios.is