1.6.0 README.md update

src/utils/http/axios/index.ts

@@ -10,9 +10,10 @@ import { PageEnum } from '@/enums/pageEnum';
 import { useGlobSetting } from '@/hooks/setting';
 
 import { isString } from '@/utils/is/';
+import { deepMerge, isUrl } from '@/utils';
 import { setObjToUrlParams } from '@/utils/urlUtils';
 
-import { RequestOptions, Result } from './types';
+import { RequestOptions, Result, CreateAxiosOptions } from './types';
 
 import { useUserStoreWidthOut } from '@/store/modules/user';
 
@@ -30,8 +31,6 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据
    */
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
-    // @ts-ignore
-    const { $message: Message, $dialog: Modal } = window;
     const {
       isShowMessage = true,
       isShowErrorMessage,
@@ -52,15 +51,16 @@ const transform: AxiosTransform = {
       return res.data;
     }
 
-    const reject = Promise.reject;
-
     const { data } = res;
 
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
+
     if (!data) {
       // return '[HTTP] Request has no return value';
-      return reject(data);
+      throw new Error('请求出错，请稍候重试');
     }
-    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    //  这里 code，result，message为 后台统一的字段，需要修改为项目自己的接口返回格式
     const { code, result, message } = data;
     // 请求成功
     const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
@@ -68,13 +68,16 @@ const transform: AxiosTransform = {
     if (isShowMessage) {
       if (hasSuccess && (successMessageText || isShowSuccessMessage)) {
         // 是否显示自定义信息提示
-        Message.success(successMessageText || message || '操作成功！');
+        $dialog.success({
+          type: 'success',
+          content: successMessageText || message || '操作成功！',
+        });
       } else if (!hasSuccess && (errorMessageText || isShowErrorMessage)) {
         // 是否显示自定义信息提示
-        Message.error(message || errorMessageText || '操作失败！');
+        $message.error(message || errorMessageText || '操作失败！');
       } else if (!hasSuccess && options.errorMessageMode === 'modal') {
         // errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
-        Modal.info({
+        $dialog.info({
           title: '提示',
           content: message,
           positiveText: '确定',
@@ -87,61 +90,49 @@ const transform: AxiosTransform = {
     if (code === ResultEnum.SUCCESS) {
       return result;
     }
-    // 接口请求错误，统一提示错误信息
-    if (code === ResultEnum.ERROR) {
-      if (message) {
-        Message.error(data.message);
-        Promise.reject(new Error(message));
-      } else {
-        const msg = '操作失败,系统异常!';
-        Message.error(msg);
-        Promise.reject(new Error(msg));
-      }
-      return reject();
+    // 接口请求错误，统一提示错误信息 这里逻辑可以根据项目进行修改
+    let errorMsg = message;
+    switch (code) {
+      // 请求失败
+      case ResultEnum.ERROR:
+        $message.error(errorMsg);
+        break;
+      // 登录超时
+      case ResultEnum.TIMEOUT:
+        const LoginName = PageEnum.BASE_LOGIN_NAME;
+        const LoginPath = PageEnum.BASE_LOGIN;
+        if (router.currentRoute.value?.name === LoginName) return;
+        // 到登录页
+        errorMsg = '登录超时，请重新登录!';
+        $dialog.warning({
+          title: '提示',
+          content: '登录身份已失效，请重新登录!',
+          positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
+          onPositiveClick: () => {
+            storage.clear();
+            window.location.href = LoginPath;
+          },
+          onNegativeClick: () => {},
+        });
+        break;
     }
-
-    // 登录超时
-    if (code === ResultEnum.TIMEOUT) {
-      const LoginName = PageEnum.BASE_LOGIN_NAME;
-      if (router.currentRoute.value.name == LoginName) return;
-      // 到登录页
-      const timeoutMsg = '登录超时,请重新登录!';
-      Modal.warning({
-        title: '提示',
-        content: '登录身份已失效，请重新登录!',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          storage.clear();
-          router.replace({
-            name: LoginName,
-            query: {
-              redirect: router.currentRoute.value.fullPath,
-            },
-          });
-        },
-        onNegativeClick: () => {},
-      });
-      return reject(new Error(timeoutMsg));
-    }
-
-    // 这里逻辑可以根据项目进行修改
-    if (!hasSuccess) {
-      return reject(new Error(message));
-    }
-
-    return data;
+    throw new Error(errorMsg);
   },
 
   // 请求之前处理config
   beforeRequestHook: (config, options) => {
-    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
 
-    if (joinPrefix) {
+    const isUrlStr = isUrl(config.url as string);
+
+    if (!isUrlStr && joinPrefix) {
       config.url = `${urlPrefix}${config.url}`;
     }
 
-    if (apiUrl && isString(apiUrl)) {
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
       config.url = `${apiUrl}${config.url}`;
     }
     const params = config.params || {};
@@ -158,7 +149,7 @@ const transform: AxiosTransform = {
     } else {
       if (!isString(params)) {
         formatDate && formatRequestDate(params);
-        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length) {
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
           config.data = data;
           config.params = params;
         } else {
@@ -183,13 +174,15 @@ const transform: AxiosTransform = {
   /**
    * @description: 请求拦截器处理
    */
-  requestInterceptors: (config) => {
+  requestInterceptors: (config, options) => {
     // 请求之前处理config
     const userStore = useUserStoreWidthOut();
     const token = userStore.getToken;
-    if (token) {
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
       // jwt token
-      config.headers.token = token;
+      (config as Recordable).headers.Authorization = options.authenticationScheme
+        ? `${options.authenticationScheme} ${token}`
+        : token;
     }
     return config;
   },
@@ -198,8 +191,8 @@ const transform: AxiosTransform = {
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
-    // @ts-ignore
-    const { $message: Message, $dialog: Modal } = window;
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
     const { response, code, message } = error || {};
     // TODO 此处要根据后端接口返回格式修改
     const msg: string =
@@ -207,57 +200,88 @@ const transform: AxiosTransform = {
     const err: string = error.toString();
     try {
       if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
-        Message.error('接口请求超时,请刷新页面重试!');
+        $message.error('接口请求超时，请刷新页面重试!');
         return;
       }
       if (err && err.includes('Network Error')) {
-        Modal.info({
+        $dialog.info({
           title: '网络异常',
-          content: '请检查您的网络连接是否正常!',
+          content: '请检查您的网络连接是否正常',
           positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
           onPositiveClick: () => {},
+          onNegativeClick: () => {},
         });
-        return;
+        return Promise.reject(error);
       }
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error as any);
     }
     // 请求是否被取消
     const isCancel = axios.isCancel(error);
     if (!isCancel) {
-      checkStatus(error.response && error.response.status, msg, Message);
+      checkStatus(error.response && error.response.status, msg);
     } else {
       console.warn(error, '请求被取消！');
     }
-    return error;
+    //return Promise.reject(error);
+    return Promise.reject(response?.data);
   },
 };
 
-const Axios = new VAxios({
-  timeout: 10 * 1000,
-  // 接口前缀
-  prefixUrl: urlPrefix,
-  headers: { 'Content-Type': ContentTypeEnum.JSON },
-  // 数据处理方式
-  transform,
-  // 配置项，下面的选项都可以在独立的接口请求中覆盖
-  requestOptions: {
-    // 默认将prefix 添加到url
-    joinPrefix: true,
-    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
-    isReturnNativeResponse: false,
-    // 需要对返回数据进行处理
-    isTransformResponse: true,
-    // post请求的时候添加参数到url
-    joinParamsToUrl: false,
-    // 格式化提交参数时间
-    formatDate: true,
-    // 消息提示类型
-    errorMessageMode: 'none',
-    // 接口地址
-    apiUrl: globSetting.apiUrl as string,
-  },
-  withCredentials: false,
-});
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        timeout: 10 * 1000,
+        authenticationScheme: '',
+        // 接口前缀
+        prefixUrl: urlPrefix,
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 消息提示类型
+          errorMessageMode: 'none',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+        },
+        withCredentials: false,
+      },
+      opt || {}
+    )
+  );
+}
 
-export default Axios;
+export const http = createAxios();
+
+// 项目，多个不同 api 地址，直接在这里导出多个
+// src/api ts 里面接口，就可以单独使用这个请求，
+// import { httpTwo } from '@/utils/http/axios'
+// export const httpTwo = createAxios({
+//   requestOptions: {
+//     apiUrl: 'http://localhost:9001',
+//     urlPrefix: 'api',
+//   },
+// });