/**
 * @param {AxiosInstance} axios實(shí)例類型
 * @param {AxiosRequestConfig} axios配置項(xiàng)類型
 */
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
class Http {
    axios: AxiosInstance
    constructor(config: AxiosRequestConfig) {
        // 創(chuàng)建一個實(shí)例 axios.create([config])
        this.axios = axios.create(config)
    }
}
// 每實(shí)例化一個 axios 時，都是不同的 axios 示例，互不干擾
new Http({
    baseURL:'qq.com';
    timeout:60 * 1
});
new Http({
    baseURL:'web.com'
});

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: AxiosRequestHeaders;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: D;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  responseEncoding?: responseEncoding | string;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  beforeRedirect?: (options: Record<string, any>, responseDetails: {headers: Record<string, string>}) => void;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  decompress?: boolean;
  transitional?: TransitionalOptions;
  signal?: AbortSignal;
  insecureHTTPParser?: boolean;
  env?: {
    FormData?: new (...args: any[]) => object;
  };
}

/**
* axios#request(config)
* @param {*} config
* @returns {*}
*/
request(config: AxiosRequestConfig) {
    return this.axios.request(config)
}

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.getUri([config])

new Http({
    baseURL:'qq.com';
    timeout:60 * 1
});

new Http({
    baseURL: 'qq.com',
    timeout: 60 * 1,
    hooks: {}, // ERROR ????
    interceptor: () => {} // ERROR ????
})

???`IinterceptorHooks`攔截器Hook接口類型
import type { AxiosResponse, AxiosRequestConfig } from 'axios'
/**
 * 攔截器的hooks,在請求或響應(yīng)被 then 或 catch 處理前攔截
 * @param {beforeRequestInterceptor(?)} 發(fā)送請求之前攔截器
 * @param {requestErrorInterceptor(?)} 請求錯誤攔截器
 * @param {responseSuccessInterceptor(?)} 響應(yīng)成功攔截器
 * @param {responseFailInterceptor(?)} 響應(yīng)失敗攔截器
 */
interface interceptorHooks {
    beforeRequestInterceptor: (config: AxiosRequestConfig) => AxiosRequestConfig
    requestErrorInterceptor: (error: any) => any
    responseSuccessInterceptor: (result: AxiosResponse) => AxiosResponse
    responseFailInterceptor: (error: any) => any
}
export type IinterceptorHooks = Partial<interceptorHooks>

???`IHttpRequestConfig` 類構(gòu)造函數(shù) config 接口類型
/**
 * 實(shí)例化Http類的配置項(xiàng)參數(shù),繼承于AxiosRequestConfig
 * @param {interceptors(?)} 攔截器Hooks
 * @param {loading} 請求loading
 * @param {...} 其它的配置項(xiàng)
 * @param {AxiosRequestConfig} axios原生的配置選
 */
export interface IHttpRequestConfig extends AxiosRequestConfig {
    interceptors?: IinterceptorHooks
}

import { IHttpRequestConfig, IinterceptorHooks } from './types'
class Http {
    axios: AxiosInstance
    interceptors?: IinterceptorHooks
    constructor(config: IHttpRequestConfig) {
        // 解構(gòu)自定義的屬性
        const { interceptors, ...AxiosRequestConfig } = config
        this.axios = axios.create(AxiosRequestConfig)
        // 存儲自定義攔截Hooks or 直接 use() 使用
        this.interceptors = interceptors
        // 傳入自定義請求攔截器Hooks
        this.axios.interceptors.request.use(
            this.interceptors?.beforeRequestInterceptor,
            this.interceptors?.requestErrorInterceptor
        )
        // 傳入自定義響應(yīng)攔截器Hooks
        this.axios.interceptors.response.use(
            this.interceptors?.responseSuccessInterceptor,
            this.interceptors?.responseFailInterceptor
        )
    }
}
// 擴(kuò)展后的實(shí)例化...?
 interceptors: {
     // ... 自定義的攔截Hooks
     beforeRequestInterceptor: (config: IHttpRequestConfig) => {
         const token = localStorage.getItem('token')
         if (token && config.headers) {
             config.headers.Authorization = token
         }
         return config
     }
 }

class Http {
    axios: AxiosInstance
    // ...
    constructor(config: IHttpRequestConfig) {
        // ...單個實(shí)例獨(dú)享攔截器處理??
        // 所有實(shí)例共享的攔截-請求攔截器??
        this.axios.interceptors.request.use(
            function (config) {
                // 在發(fā)送請求之前做些什么
                return config
            },
            function (error) {
                // 對請求錯誤做些什么
                return Promise.reject(error)
            }
        )
        // 所有實(shí)例共享的攔截-響應(yīng)攔截器
        this.axios.interceptors.response.use(
            function (response) {
                // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
                // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
                return response
            },
            function (error) {
                // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
                // 對響應(yīng)錯誤做點(diǎn)什么
                return Promise.reject(error)
            }
        )
    }
}

// `transformRequest` 允許在向服務(wù)器發(fā)送前，修改請求數(shù)據(jù)
// 它只能用于 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
// 數(shù)組中最后一個函數(shù)必須返回一個字符串， 一個Buffer實(shí)例，ArrayBuffer，F(xiàn)ormData，或 Stream
// 你可以修改請求頭。
transformRequest: [function (data, headers) {
 // 對發(fā)送的 data 進(jìn)行任意轉(zhuǎn)換處理
 return data;
}],
// `transformResponse` 在傳遞給 then/catch 前，允許修改響應(yīng)數(shù)據(jù)
transformResponse: [function (data) {
 // 對接收的 data 進(jìn)行任意轉(zhuǎn)換處理
 return data;
}],

/**
* axios#request(config)
* @param {*} config
* @returns {*}
*/
request(config: AxiosRequestConfig) {
	return this.axios.request(config)
}
// ...改為 AxiosRequestConfig -> IHttpRequestConfig
request(config: IHttpRequestConfig) {
    // ... 在執(zhí)行請求之前，執(zhí)行單個請求獨(dú)享的攔截器(?)
    return this.axios.request(config).then(
    	// ... 
    )
}

// Http 封裝的request??
 request(config: IHttpRequestConfig) {
     // 存在單個方法獨(dú)享自定義攔截器Hooks(請求之前)??
     if (config.interceptors?.beforeRequestInterceptor) {
         // 立即執(zhí)行beforeRequestInterceptor方法，傳入config處理返回新的處理后的config
         config = config.interceptors.beforeRequestInterceptor(config)
     }
     return this.axios
         .request(config)
         .then((result) => {
         // 存在單個方法獨(dú)享自定義攔截器Hooks(響應(yīng)成功)??
         if (config.interceptors?.responseSuccessInterceptor) {
             // 立即執(zhí)行beforeRequestInterceptor方法，傳入config處理返回新的處理后的config
             result = config.interceptors.responseSuccessInterceptor(result)
         }
         return result
     })
         .catch((error) => {
         // 存在單個方法獨(dú)享自定義攔截器Hooks(響應(yīng)失敗)??
         if (config.interceptors?.responseFailInterceptor) {
             // 立即執(zhí)行beforeRequestInterceptor方法，傳入config處理返回新的處理后的config
             error = config.interceptors.responseFailInterceptor(error)
         }
         return error
     })
 }
// 執(zhí)行 request 方法，傳入攔截器處理??，如：
axios.request({
    url: '/api/addUser',
    methed: 'POST',
    interceptors: {
        beforeRequestInterceptor:(config) => {
            // ...處理config數(shù)據(jù)
            return config
        },
        // ...請求錯誤處理不攔截
        responseSuccessInterceptor:(result) => {
            return result
        }
    }
})

// 所有實(shí)例共享的攔截-響應(yīng)攔截器
this.axios.interceptors.response.use(
    function (response) {
        // 返回為文件流時,直接返回(文件需要單獨(dú)處理)??
        if (['blob', 'arraybuffer'].includes(response.request.responseType)) {
            // if (response.headers['content-disposition']) {
            //     let fileName = response.headers['content-disposition'].split('filename=')[1]
            //     fileName = decodeURI(fileName)
            //     return {
            //         data: response.data,
            //         fileName
            //     }
            // }
            return response
        }
        // 根據(jù)業(yè)務(wù)碼 or 狀態(tài)碼...進(jìn)行判斷
        // 扒皮??
        return response.data
    },
    function (error) {
        // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
        // 對響應(yīng)錯誤做點(diǎn)什么
        return Promise.reject(error)
    }
)

// 最終數(shù)據(jù)類型注解
interface IDateType {
    [key: string]: any
}
// axios 返回的數(shù)據(jù)類型注解，IDateType === T
interface IDTO<T = any> {
    code: number
    data: T
    message: string
    state: number
    [prop: string]: any
}
// 請求方法，傳入注解
axios.request<IDTO<IDateType>>({
    url: '/api/addUser',
    methed: 'POST',
})

// 修改 AxiosRequestConfig 類型注解，默認(rèn)類型為原來的 AxiosResponse，傳遞到響應(yīng)成功的攔截中進(jìn)行泛型注解，用于在方法中重新修改返回的數(shù)據(jù)類型
// 最終的泛型類型注解到達(dá) responseSuccessInterceptor 中
interface interceptorHooks<T> {
    beforeRequestInterceptor: (config: AxiosRequestConfig) => AxiosRequestConfig
    requestErrorInterceptor: (error: any) => any
    responseSuccessInterceptor: (result: T) => T
    responseFailInterceptor: (error: any) => any
}
export type IinterceptorHooks<T = AxiosResponse> = Partial<interceptorHooks<T>>
export interface IHttpRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
    interceptors?: IinterceptorHooks<T>
}
// 修改 Http class request方法，通過 泛型 T 接受方法傳達(dá)過來的 DTO 類型注解，傳遞到 IHttpRequestConfig 中修改 responseSuccessInterceptor 的參數(shù)類型注解以及返回值注解，在單個方法獨(dú)享自定義攔截器中就可以接受參數(shù)，并且返回正確的 DTO 類型數(shù)據(jù)
// 由于在下面的 this.axios.request() 方法中，返回的數(shù)據(jù)已經(jīng)被上一個攔截器扒皮修改了，返回的 result 類型注解中存在類型不正確情況(正確返回應(yīng)返回response.data的類型注解)，實(shí)際返回為 AxiosResponse<any,any>類型注解，導(dǎo)致數(shù)據(jù)返回到最外層方法時編輯器報錯(最外層接受 DTO 類型)，所以需要手動修改this.axios.request() 方法中返回的類型注解 this.axios.request<any, T>()
request<T>(config: IHttpRequestConfig<T>): Promise<T> {  
        return this.axios
            .request<any, T>(config)
            .then((result) => {
                // 存在單個方法獨(dú)享自定義攔截器Hooks(響應(yīng)成功)
                if (config.interceptors?.responseSuccessInterceptor) {
                    // 立即執(zhí)行beforeRequestInterceptor方法，傳入config處理返回新的處理后的config
                    result = config.interceptors.responseSuccessInterceptor(result)
                }
                return result
            })
            .catch((error) => {
              // ...
            })
    }