type ErrMsg = string
type Result<T> = [ErrMsg | null, T | null, any?]
type PromiseResult<T> = Promise<Result<T>>

import Axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, Canceler, AxiosError, CancelToken, CancelTokenSource } from 'axios';
import { message } from 'antd'

// 扩充传参，ts类型主要此处生成，所以可以写在这个文件中，且这个类型是拓展了AxiosRequestConfig
export interface MyAxiosConfig extends AxiosRequestConfig {
  skipHandle?: boolean, // 是跳过处理
  notTip?: boolean, // 出错是否不会自动弹出提示(skipHandle 值不能为true)
  skipToken?: boolean, // 不再统一添加token
}

export default class AxiosServer {
  private instance: AxiosInstance;
  constructor(config: MyAxiosConfig) {
    this.instance = Axios.create(config)

    // 全局请求前拦截
    // this.instance.interceptors.request.use(req => req, err => err) 暂不需要，有request方法封装了
    // 全局请求后拦截
    // this.instance.interceptors.response.use(res => res, err => err) 暂不需要，有request方法封装了
  }

  // 要返回的实例
  public async request<T = any>(config: MyAxiosConfig): PromiseResult<T> {
    let serviceResult: AxiosResponse | null = null;
    let serviceError: AxiosError | null = null;
    config.headers = config.headers || {}

		// 统一增加Authorization请求头, skipToken 跳过增加token
		const token = '' // 此处需要得到token，比如：cookies.get('token');
		if (token && !config.skipToken) {
			config.headers!['Authorization'] = `Bearer ${token}`;
		}

    try {
      // 去发起请求
      serviceResult = await this.instance.request(config)
      // 只要http请求状态是200系列，就会走这里
    } catch(error: any) {
      serviceResult = null
      console.error(error)
      if (error.response) {
        // 包含 response 字段，说明只是http状态码非200系列，但后台仍返回了对应的响应数据结构
        // 可能是http状态码非200系列：如果服务器返回错误的状态码，400~599，会抛出一个HTTP错误（HTTP Error）。
        error = error as AxiosError
        serviceResult = error.response
      } else {
        // * 通用错误：比如JSON解析错误等，会抛出一个通用错误（General Error）。
        // * 请求被前端中断：如果请求被前端中断，会抛出一个取消错误（Cancel Error）。
        // * 网络错误：如果请求失败，比如网络不可用或请求超时，会抛出一个网络错误（Error）。
        serviceError = error as AxiosError
      }
    }

    if (serviceResult) {
      // 正常会走这里，即使返回的http状态码是500，只要后台响应了数据，就会走这里
      // 去解析后台返回的数据结构
      return this.dataHandler(serviceResult, config)
    } else {
      // 后台没能响应数据，比如：
      // * 通用错误，比如JOSN解析错误
      // * 请求被前端中断
      // * 网络错误、请求超时、设备未联网、后台服务未启动等等
      return this.errorHandler(serviceError, config)
    }
  }

  // 返回结果的处理程序
  private async dataHandler<T = any>(axiosResponse: AxiosResponse, config: MyAxiosConfig): PromiseResult<T> {
    // 不需处理，直接返回
    if (config.skipHandle) return [null, null, axiosResponse]

    // 后端返回的消息体，假设数据类型见下
    type ResponseBody = {
      code: number,
      data: any,
      msg: string | null,
    }
    const responseBody: ResponseBody | null = axiosResponse?.data || null

    let tipMsg = ''
    if (responseBody?.code === 424) {
      // token过期，自动去刷新token
      // const success = await useUserInfoMethods().refreshToken()
      // token刷新成功后，再次进行本次请求，否则走后面抛出请求错误
      // if (success) return this.request(axiosResponse?.config)
    }

    if (responseBody?.code !== 200) {
      tipMsg = responseBody?.msg || '服务出错，请联系管理员'
    }

    // 需要提示切有错误提示
    if (tipMsg && !config.notTip) { // 需要弹框提醒
      message.error(tipMsg)
    }

    return [tipMsg, responseBody?.data, axiosResponse]
  }

  // 服务出错/取消请求的处理
  private errorHandler(error: AxiosError | any, config: MyAxiosConfig): Result<null> {
    // 不需处理，直接返回
    if (config.skipHandle) return [null, null, error]

    let tipMsg: ErrMsg = '服务出错！'
    let isAxiosError = error?.isAxiosError || false
    if (isAxiosError) {
      // 是 axios 错误，只要不是代码运行错误，比如解析json错误、执行不存在的方法等等，都走这里
      error = error as AxiosError
      if (error?.message?.includes('timeout')) {
        // 超时
        let timeout = error?.config?.timeout || 0
        tipMsg = `请求超时 | 当前超时时间：${timeout / 1000}S` // 请求超时
      } else if (error?.message?.includes('Network Error')) {
        // 网络错误或者后端接口服务未启动
        tipMsg = '网络错误，请检查设备联网或稍后再试!'
      } else if (error?.message?.includes('canceled')) {
        // 接口被代码手动中断，不应提示
        tipMsg = ''
      } else {
        tipMsg = error?.message || '服务出错，请稍后再试!'
      }
    } else {
      // 通用错误，比如解析json错误、执行不存在的方法，throw 抛出的错误等等
      error = error as any
      tipMsg = error.message || ''
    }
    // 需要弹框
    if (tipMsg && !config.notTip) {
      message.error(tipMsg)
    }

    return [tipMsg, null, error]
  }
}

/**
 * 创建一个取消请求的source
 * 设置某个请求的配置 config.cancelToken = source.token
 * 再调用 source.cancel() 即可取消这个请求
 * @returns {CancelTokenSource}
 */
export function createCancelSource(): CancelTokenSource {
  return Axios.CancelToken.source()
}

import AxiosServer from '@/utils/AxiosServer'

// 创建一个 axios 服务
const service = new AxiosServer({
  // 默认配置们
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 1000 * 60, // 超时时间, 毫秒
  // withCredentials: true, // 发送请求时，是否带 cookie
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
  }
})

// 默认导出的请求方法
export default service.request.bind(service);

import { MyAxiosConfig } from '@/utils/AxiosServer'
import request from './request'

// 登录的请求入参
export type LoginParams = {
  account: string,
  password: string,
}
// 登录的响应数据
export type LoginData = {
  name: string,
  age: number,
  parent?: string,
}
// 登录
export function login<T = LoginData>(data: LoginParams, otherConfig: Partial<MyAxiosConfig> = {}): PromiseResult<T> {
  return request<T>({
    url: '/login',
    method: 'post',
    data: data,
    ...otherConfig,
  })
}

// 用户权限列表的请求入参
export type RoleListParams = {
  userId: string,
}
// 用户权限列表的响应数据的一条
export type RoleData = {
  roleId: string,
  roleName: string,
  updateTime: string,
}
// 获取用户权限列表
export function roleList<T = RoleData[]>(data: RoleListParams): PromiseResult<T> {
  return request<T>({
    url: '/roleList',
    method: 'get',
    params: data,
  })
}

import { CancelTokenSource } from 'axios'

const [loading, setloading] = useState(false)
// 取消请求的控制器
const cancelSourceLogin = useRef<CancelTokenSource | null>(null)
async function toLogin() {
  if (loading) return
  setloading(true)
  // 添加取消请求的控制器，非必须
  cancelSourceLogin.current = createCancelSource()
  // 某些条件下，可以手动取消请求
  // cancelSourceLogin.current?.cancel()
  const [errMsg, data, res] = await login({
    account: '小明',
    password: '小明的密码'
  }, {
    // 第二个参数，传入其他的配置，比如请求头、取消请求的标记
    cancelToken: cancelSourceLogin.current.token,
    skipToken: true, // 不需要添加token的请求头
  })
  setloading(false)
  cancelSourceLogin.current = null
  if (!errMsg) {
    message.success('登录成功')
  }
}