Crop / 裁剪

Owner 徐绍平

安装

yarn add @yunxi/request

创建 http 实例

const axiosOpts = {
  baseURL:
    import.meta.env.MODE === 'development' ? '/api' : <string>import.meta.env.VITE_APP_BASE_API,
  timeout: 1000 * 10,
};

const handleRequest = (config: AxiosRequestConfig) => {
  if (config.headers) {
    config.headers.authorization = <string>storeHelper.get('y-token');
    config.headers.source = '6';
  }
  return config;
};

// 创建 http实例
export const http = new HttpServer(axiosOpts, {
  // debugger: true,
  handleRequest,
  errorHandle: async response => {
    switch (response.code) {
      case 401:
        message.error('您未登录，或者登录已经超时，请先登录！');
        await toLogin();
        break;
      case 500:
        message.error('服务器内部错误！');
        break;
      default:
        message.error(<string>response.msg || '请求出错，请检查');
        break;
    }
  },
});

// 不走errorHandle 返回axios 原始数据
// 适用 特殊接口需要走自定义catch的逻辑
export const rawHttp = new HttpServer(axiosOpts, {
  raw: true,
  handleRequest,
});

接口调用

import { http, rawHttp } from '../http-server';

export function liveDecorationTempInfo(data: { templateId: string }) {
  return http.get<ITempData>('/live/decorate/get-template', data);
}

export function liveDecorationTempCreate(data: ITempData) {
  return rawHttp.post('/live/decorate/create-template', data);
}

配置

export type IErrorHandle = (args: IResponseData, response?: AxiosResponse) => void;
export type IHandleRequest = (config: AxiosRequestConfig) => void;

// 后端返回数据结构
export interface IResponseData<T = any> {
  code: number;
  data: T;
  msg: string;
  total: number;
  trace: string;
  statusCode?: number; // 老接口兼容
  message?: string;
}

// 自定义配置
export interface ICustomConfig {
  raw?: boolean; // 是否返回axios 原始数据，不处理handleResponse
  debugger?: boolean; // 是否开启 debugger 模式
  errorHandle?: IErrorHandle; // 错误处理函数
  handleRequest?: IHandleRequest;
}