import axios, { AxiosInstance, AxiosResponse } from "axios";
import { getToken } from "./token";
 
// 獲取請(qǐng)求的基礎(chǔ)URL
const getBaseUrl = () => `http://${window.constant.serverIp}:8888}`;
 
// 創(chuàng)建http請(qǐng)求的實(shí)例對(duì)象
const httpProto: AxiosInstance = axios.create({
  timeout: 5000,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'Access-Control-Allow-Origin': '*',
  }
});
 
// 添加請(qǐng)求攔截器
httpProto.interceptors.request.use((config: any) => {
  // 配置baseURL
  config.baseURL = getBaseUrl();
  // 獲取憑證
  const token = getToken();
  if (token) {
    // 如果有憑證就加上此憑證
    config.headers.Authorization = `${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error)
});
 
// 添加響應(yīng)攔截器
httpProto.interceptors.response.use(
  (response: AxiosResponse) => {
    const { data } = response
    // 統(tǒng)一處理響應(yīng)結(jié)果
    if (data.result === 0) {
      return data;
    } else {
      return Promise.reject(data);
    }
  },
  (error) => {
    // 統(tǒng)一處理錯(cuò)誤信息
    return Promise.reject(error);
  }
);
 
// 將httpProto實(shí)例，也就是AxiosInstance實(shí)例對(duì)象封裝起來(lái)
const http = (method: string, ...rest: any) => {
  return httpProto[method](...rest);
}
 
// 可供使用的urls
const urls = {
  example: `/prod/example`,
}
 
const methods = {
  get: 'get',
  post: 'post',
  delete: 'delete',
}
 
export { http, urls, methods };

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 
// 日志處理，可定制
const printLog = console;
 
// 作為被Promise包裹的請(qǐng)求響應(yīng)對(duì)象的格式
export interface IResponse {
  code: number;
  msg: string;
  result: {
    lastOperaTime: number;
    data: any;
  };
}
 
// 發(fā)送請(qǐng)求的配置項(xiàng)的格式
export interface RequestParams {
  url: string;
  baseUrl?: string;
  data?: object;
  filter?: boolean;
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream';
  headers?: any;
  timeout?: number;
}
 
// 封裝對(duì)象支持的請(qǐng)求方式/方法
interface IHttp {
  get?: (params: RequestParams) => Promise<any>;
  post?: (params: RequestParams) => Promise<any>;
  put?: (params: RequestParams) => Promise<any>;
  patch?: (params: RequestParams) => Promise<any>;
  delete?: (params: RequestParams) => Promise<any>;
}
 
// 支持的請(qǐng)求方式類型
export type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
 
// 向外暴露出去的對(duì)象
const req: IHttp = {};
 
// 支持的請(qǐng)求類型
const methods: HttpMethod[] = ['get', 'post', 'put', 'patch', 'delete'];
 
// 遍歷methods數(shù)組，逐步構(gòu)造req對(duì)象
methods.forEach((_m: HttpMethod) => {
  // 使用遍歷的方式對(duì)req對(duì)象上的各個(gè)方法進(jìn)行構(gòu)造
  req[_m] = (params: RequestParams) => {
    // 1. 構(gòu)造參數(shù)合并
    params = {
      ...params,
      responseType: params.responseType || 'json',
    };
 
    // 2. 從使用對(duì)象方法的形參上結(jié)構(gòu)出必要的參數(shù)
    const {
      url, // 服務(wù)器地址
      data, // 有效載荷
      filter = true, // 過(guò)濾器
      responseType, // 返回類型
      timeout, // 超時(shí)時(shí)間
    } = params;
 
    // 3. 使用axios創(chuàng)建AxiosInstance實(shí)例對(duì)象
    const instance = axios.create({
      baseURL: params.baseUrl ?? `http://${window.location.hostname}`,
      timeout,
    });
 
    // 4. 創(chuàng)建請(qǐng)求頭對(duì)象
    const headers = {
      lastOperaTime: Date.now(), // 時(shí)間戳
      token: getToken(), // 憑證
      lang: getLocalLocale(), // 語(yǔ)言
      Accept: 'application/json', // 接受返回?cái)?shù)據(jù)的類型
      'Content-Type': 'application/json; charset=utf-8', // 內(nèi)容格式
    };
 
    // 5. 請(qǐng)求配置
    const axiosConfig: AxiosRequestConfig = {
      method: _m, // 請(qǐng)求方法
      url, // 服務(wù)器地址
      headers: {
        // 合并請(qǐng)求頭
        ...headers,
        ...(params.headers || {}),
      },
      responseType, // 返回值類型
    };
 
    // 6. 針對(duì)不同的請(qǐng)求類型需要對(duì)請(qǐng)求配置進(jìn)行修正
    if (data) {
      // 對(duì)于有效載荷，不同的請(qǐng)求方式攜帶信息的方式是不同的，在這里做了區(qū)分
      if (_m === 'get') {
        axiosConfig.params = data;
      } else if (data instanceof FormData) {
        axiosConfig.data = data;
      } else {
        axiosConfig.data = data;
      }
    }
 
    // 添加請(qǐng)求攔截器
    instance.interceptors.request.use(
      // 占位
      (config: any) => {
        return config;
      },
      // 失敗則返回失敗
      (error: any) => {
        return Promise.reject(error);
      }
    );
 
    // 7. 添加響應(yīng)攔截器
    instance.interceptors.response.use(
      // 成功的回調(diào)，將發(fā)起請(qǐng)求的參數(shù)作為第二參數(shù)回傳
      (res: any) => handleSuccess(res, params),
      // 失敗的回調(diào)，將發(fā)起請(qǐng)求的參數(shù)作為第二參數(shù)回傳
      (err: any) => handleError(err, params)
    );
 
    // 8. 構(gòu)造請(qǐng)求成功的回調(diào)函數(shù) -- 主要是對(duì)返回?cái)?shù)據(jù)進(jìn)行格式化的操作
    function handleSuccess(response: AxiosResponse<IResponse>, requestParams: RequestParams) {
      if (response.data) {
        // 解構(gòu)數(shù)據(jù)
        const { code, msg, result } = response.data;
        if (code !== 0) {
          printLog.error(msg);
        }
 
        return filter ? result?.data ?? result : response.data;
      } else {
        printLog.error('incorrect data format');
        return response.data;
      }
    }
 
    // 9. 構(gòu)造請(qǐng)求失敗的回調(diào)函數(shù)
    function handleError(err: AxiosError, requestParams: RequestParams) {
      if (err.response) {
        printLog.error(`api: ${requestParams.url}: ${err.response.status}`);
      }
      if (err instanceof Error) {
        if (err.message) {
          printLog.error(err.message);
        }
      }
      if (!window.navigator.onLine) {
        // 處理斷網(wǎng)情況
        printLog.error('netwrok error');
      }
      return Promise.reject(err);
    }
 
    // 10. 發(fā)送請(qǐng)求并將請(qǐng)求結(jié)果（Promise對(duì)象）作為函數(shù)的返回值
    return instance.request(axiosConfig);
  };
});
 
export default req;