Vben
2021-06-06 50f94bfee4c58b864e335269d698a26f48b75ccb
src/utils/http/axios/index.ts
@@ -16,13 +16,13 @@
import { isString } from '/@/utils/is';
import { getToken } from '/@/utils/auth';
import { setObjToUrlParams, deepMerge } from '/@/utils';
import { errorStore } from '/@/store/modules/error';
import { errorResult } from './const';
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
import { useI18n } from '/@/hooks/web/useI18n';
import { createNow, formatRequestDate } from './helper';
import { joinTimestamp, formatRequestDate } from './helper';
const globSetting = useGlobSetting();
const prefix = globSetting.urlPrefix;
const urlPrefix = globSetting.urlPrefix;
const { createMessage, createErrorModal } = useMessage();
/**
@@ -30,11 +30,15 @@
 */
const transform: AxiosTransform = {
  /**
   * @description: 处理请求数据
   * @description: 处理请求数据。如果数据不是预期格式,可直接抛出错误
   */
  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
    const { t } = useI18n();
    const { isTransformRequestResult } = options;
    const { isTransformRequestResult, isReturnNativeResponse } = options;
    // 是否返回原生响应头 比如:需要获取响应头时使用该属性
    if (isReturnNativeResponse) {
      return res;
    }
    // 不进行任何处理,直接返回
    // 用于页面代码可能需要直接获取code,data,message这些信息时开启
    if (!isTransformRequestResult) {
@@ -45,53 +49,39 @@
    const { data } = res;
    if (!data) {
      // return '[HTTP] Request has no return value';
      return errorResult;
      throw new Error(t('sys.api.apiRequestFailed'));
    }
    //  这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式
    const { code, result, message } = data;
    // 这里逻辑可以根据项目进行修改
    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
    if (!hasSuccess) {
      if (message) {
        // errorMessageMode=‘modal’的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误
        if (options.errorMessageMode === 'modal') {
          createErrorModal({ title: t('sys.api.errorTip'), content: message });
        } else if (options.errorMessageMode === 'message') {
          createMessage.error(message);
        }
      }
      Promise.reject(new Error(message));
      return errorResult;
    }
    // 接口请求成功,直接返回结果
    if (code === ResultEnum.SUCCESS) {
    if (hasSuccess) {
      return result;
    }
    // 接口请求错误,统一提示错误信息
    if (code === ResultEnum.ERROR) {
      if (message) {
        createMessage.error(data.message);
        Promise.reject(new Error(message));
      } else {
        const msg = t('sys.api.errorMessage');
        createMessage.error(msg);
        Promise.reject(new Error(msg));
      }
      return errorResult;
    // 在此处根据自己项目的实际情况对不同的code执行不同的操作
    // 如果不希望中断当前请求,请return数据,否则直接抛出异常即可
    switch (code) {
      case ResultEnum.TIMEOUT:
        const timeoutMsg = t('sys.api.timeoutMessage');
        createErrorModal({
          title: t('sys.api.operationFailed'),
          content: timeoutMsg,
        });
        throw new Error(timeoutMsg);
      default:
        if (message) {
          // errorMessageMode=‘modal’的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误
          // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
          if (options.errorMessageMode === 'modal') {
            createErrorModal({ title: t('sys.api.errorTip'), content: message });
          } else if (options.errorMessageMode === 'message') {
            createMessage.error(message);
          }
        }
    }
    // 登录超时
    if (code === ResultEnum.TIMEOUT) {
      const timeoutMsg = t('sys.api.timeoutMessage');
      createErrorModal({
        title: t('sys.api.operationFailed'),
        content: timeoutMsg,
      });
      Promise.reject(new Error(timeoutMsg));
      return errorResult;
    }
    return errorResult;
    throw new Error(message || t('sys.api.apiRequestFailed'));
  },
  // 请求之前处理config
@@ -99,7 +89,7 @@
    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
    if (joinPrefix) {
      config.url = `${prefix}${config.url}`;
      config.url = `${urlPrefix}${config.url}`;
    }
    if (apiUrl && isString(apiUrl)) {
@@ -109,10 +99,10 @@
    if (config.method?.toUpperCase() === RequestEnum.GET) {
      if (!isString(params)) {
        // 给 get 请求加上时间戳参数,避免从缓存中拿数据。
        config.params = Object.assign(params || {}, createNow(joinTime, false));
        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
      } else {
        // 兼容restful风格
        config.url = config.url + params + `${createNow(joinTime, true)}`;
        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
        config.params = undefined;
      }
    } else {
@@ -150,7 +140,8 @@
   */
  responseInterceptorsCatch: (error: any) => {
    const { t } = useI18n();
    errorStore.setupErrorHandle(error);
    const errorLogStore = useErrorLogStoreWithOut();
    errorLogStore.addAjaxErrorInfo(error);
    const { response, code, message } = error || {};
    const msg: string = response?.data?.error?.message ?? '';
    const err: string = error?.toString?.() ?? '';
@@ -180,7 +171,7 @@
        // 基础接口地址
        // baseURL: globSetting.apiUrl,
        // 接口可能会有通用的地址部分,可以统一抽取出来
        prefixUrl: prefix,
        urlPrefix: urlPrefix,
        headers: { 'Content-Type': ContentTypeEnum.JSON },
        // 如果是form-data格式
        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
@@ -190,6 +181,8 @@
        requestOptions: {
          // 默认将prefix 添加到url
          joinPrefix: true,
          // 是否返回原生响应头 比如:需要获取响应头时使用该属性
          isReturnNativeResponse: false,
          // 需要对返回数据进行处理
          isTransformRequestResult: true,
          // post请求的时候添加参数到url