api.post(url, data).then((res) => {
  if (res.code === 1) {
    // ...
  } else {
    // 全局消息提示
    console.error(res.message)
  }
})

// 這是 axios 請(qǐng)求類型定義，但是因?yàn)槲覀冃枰С肿远x配置，所以待會(huì)需要把它拓展一下
export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
  params?: any;
  paramsSerializer?: ParamsSerializerOptions;
  data?: D;
  timeout?: Milliseconds;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  // ...
}
// 這是 axios 請(qǐng)求返回類型定義，里面類型需要處理，所以這個(gè)我們也得處理一下。
export interface AxiosResponse<T = any, D = any> {
  data: T;
  status: number;
  statusText: string;
  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
  // 這里的配置沒有支持拓展，所以待會(huì)也得處理一下
  config: InternalAxiosRequestConfig<D>;
  request?: any;
}
// 所以我們只需要改造 3 個(gè) axios 類型定義就行了
// 另外我們需要定義下自己的攔截器 和 請(qǐng)求結(jié)果封裝

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
// 定義一個(gè)常見后端請(qǐng)求返回
type BaseApiResponse<T> = {
  code: number
  message: string
  result: T
}
// 拓展 axios 請(qǐng)求配置，加入我們自己的配置
interface RequestOptions {
  // 是否全局展示請(qǐng)求 錯(cuò)誤信息
  globalErrorMessage?: boolean
  // 是否全局展示請(qǐng)求 成功信息
  globalSuccessMessage?: boolean
}
// 拓展自定義請(qǐng)求配置
interface ExpandAxiosRequestConfig<D = any> extends AxiosRequestConfig<D> {
  interceptorHooks?: InterceptorHooks
  requestOptions?: RequestOptions
}
// 拓展 axios 請(qǐng)求配置
interface ExpandInternalAxiosRequestConfig<D = any> extends InternalAxiosRequestConfig<D> {
  interceptorHooks?: InterceptorHooks
  requestOptions?: RequestOptions
}
// 拓展 axios 返回配置
interface ExpandAxiosResponse<T = any, D = any> extends AxiosResponse<T, D> {
  config: ExpandInternalAxiosRequestConfig<D>
}
export interface InterceptorHooks {
  requestInterceptor?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>
  responseInterceptorCatch?: (error: any) => any
}
// 導(dǎo)出Request類，可以用來自定義傳遞配置來創(chuàng)建實(shí)例
export default class Request {
  // axios 實(shí)例
  private _instance: AxiosInstance
  // 默認(rèn)配置
  private _defaultConfig: ExpandAxiosRequestConfig = {
    baseURL: '/api',
    timeout: 5000,
    requestOptions: {
      globalErrorMessage: true,
      globalSuccessMessage: false
    }
  }
  private _interceptorHooks?: InterceptorHooks
  constructor(config: ExpandAxiosRequestConfig) {
    // 使用axios.create創(chuàng)建axios實(shí)例
    this._instance = axios.create(Object.assign(this._defaultConfig, config))
    this._interceptorHooks = config.interceptorHooks
    this.setupInterceptors()
  }
  // 通用攔截，在初始化時(shí)就進(jìn)行注冊(cè)和運(yùn)行，對(duì)基礎(chǔ)屬性進(jìn)行處理
  private setupInterceptors() {
    this._instance.interceptors.request.use(this._interceptorHooks?.requestInterceptor, this._interceptorHooks?.requestInterceptorCatch)
    this._instance.interceptors.response.use(this._interceptorHooks?.responseInterceptor, this._interceptorHooks?.responseInterceptorCatch)
  }
  // 定義核心請(qǐng)求
  public request(config: ExpandAxiosRequestConfig): Promise<AxiosResponse> {
    // ！??！?? 注意：axios 已經(jīng)將請(qǐng)求使用 promise 封裝過了
    // 這里直接返回，不需要我們?cè)偈褂?promise 封裝一層
    return this._instance.request(config)
  }
  public get<T = any>(url: string, config?: ExpandAxiosRequestConfig): Promise<AxiosResponse<BaseApiResponse<T>>> {
    return this._instance.get(url, config)
  }
  public post<T = any>(url: string, data?: any, config?: ExpandAxiosRequestConfig): Promise<T> {
    return this._instance.post(url, data, config)
  }
  public put<T = any>(url: string, data?: any, config?: ExpandAxiosRequestConfig): Promise<T> {
    return this._instance.put(url, data, config)
  }
  public delete<T = any>(url: string, config?: ExpandAxiosRequestConfig): Promise<T> {
    return this._instance.delete(url, config)
  }
}

// 請(qǐng)求攔截器
const transform: InterceptorHooks = {
  requestInterceptor(config) {
    // 請(qǐng)求頭部處理，如添加 token
    const token = 'token-value'
    if (token) {
      config!.headers!.Authorization = token
    }
    return config
  },
  requestInterceptorCatch(err) {
    // 請(qǐng)求錯(cuò)誤，這里可以用全局提示框進(jìn)行提示
    return Promise.reject(err)
  },
  responseInterceptor(result) {
    // 因?yàn)?axios 返回不支持?jǐn)U展自定義配置，需要自己斷言一下
    const res = result as ExpandAxiosResponse
    // 與后端約定的請(qǐng)求成功碼
    const SUCCESS_CODE = 1
    if (res.status !== 200) return Promise.reject(res)
    if (res.data.code !== SUCCESS_CODE) {
      if (res.config.requestOptions?.globalErrorMessage) {
        // 這里全局提示錯(cuò)誤
        console.error(res.data.message)
      }
      return Promise.reject(res.data)
    }
    if (res.config.requestOptions?.globalSuccessMessage) {
      // 這里全局提示請(qǐng)求成功
      console.log(res.data.message)
    }
    // 請(qǐng)求返回值，建議將 返回值 進(jìn)行解構(gòu)
    return res.data.result
  },
  responseInterceptorCatch(err) {
    // 這里用來處理 http 常見錯(cuò)誤，進(jìn)行全局提示
    const mapErrorStatus = new Map([
      [400, '請(qǐng)求方式錯(cuò)誤'],
      [401, '請(qǐng)重新登錄'],
      [403, '拒絕訪問'],
      [404, '請(qǐng)求地址有誤'],
      [500, '服務(wù)器出錯(cuò)']
    ])
    const message = mapErrorStatus.get(err.response.status) || '請(qǐng)求出錯(cuò)，請(qǐng)稍后再試'
    // 此處全局報(bào)錯(cuò)
    console.error(message)
    return Promise.reject(err.response)
  }
}
// 具體使用時(shí)先實(shí)例一個(gè)請(qǐng)求對(duì)象
const request = new Request({
  baseURL: '/api',
  timeout: 5000,
  interceptorHooks: transform
})
// 定義請(qǐng)求返回
interface ResModel {
  str: string
  num: number
}
// 發(fā)起請(qǐng)求
request
  .post<ResModel>(
    '/abc',
    {
      a: 'aa',
      b: 'bb'
    },
    {
      requestOptions: {
        globalErrorMessage: true
      }
    }
  )
  .then((res) => {
    console.log('res: ', res)
    console.log(res.str)
  })