build(deps): 添加smooth-scroll插件、axios封装

src/service/request/config.ts

@@ -0,0 +1,8 @@
+/** 请求超时时间 */
+export const REQUEST_TIMEOUT = 15 * 1000;
+
+/** 请求头的content-type类型 */
+export enum ContentType {
+  json = 'application/json',
+  formUrlEncoded = 'application/x-www-form-urlencoded'
+}

src/service/request/errorHandler.ts

@@ -0,0 +1,77 @@
+import { ElMessage } from 'element-plus';
+
+const ERROR_STATUS = {
+  400: '400: 请求出现语法错误',
+  401: '401: 用户未授权~',
+  403: '403: 服务器拒绝访问~',
+  404: '404: 请求的资源不存在~',
+  405: '405: 请求方法未允许~',
+  408: '408: 网络请求超时~',
+  500: '500: 服务器内部错误~',
+  501: '501: 服务器未实现请求功能~',
+  502: '502: 错误网关~',
+  503: '503: 服务不可用~',
+  504: '504: 网关超时~',
+  505: '505: http版本不支持该请求~'
+};
+type ErrorStatus = 400 | 401 | 403 | 404 | 405 | 408 | 500 | 501 | 502 | 503 | 504 | 505;
+
+/** 错误信息显示时间 */
+export const errorDuration = 3000 / 1000;
+
+/**
+ * 网络请求错误状态处理
+ * @param error - 错误
+ */
+export function errorHandler(error: any) {
+  if (error.response) {
+    const status = error.response.status as ErrorStatus;
+    ElMessage.error(ERROR_STATUS[status]);
+    return;
+  }
+  if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
+    ElMessage.error('网络连接超时~');
+    return;
+  }
+  if (!window.navigator.onLine || error.message === 'Network Error') {
+    ElMessage.error('网络不可用~');
+    return;
+  }
+  ElMessage.error('未知错误~');
+}
+
+/**
+ * 连续的请求错误依此显示
+ * @param duration - 上一次弹出错误消息到下一次的时间(ms)
+ */
+export function continuousErrorHandler(duration: number) {
+  let errorStacks: string[] = [];
+  function pushError(id: string) {
+    errorStacks.push(id);
+  }
+  function removeError(id: string) {
+    errorStacks = errorStacks.filter(item => item !== id);
+  }
+  function handleError(id: string, callback: Function) {
+    callback();
+    setTimeout(() => {
+      removeError(id);
+    }, duration);
+  }
+
+  function handleContinuousError(callback: Function) {
+    const id = Date.now().toString(36);
+    const { length } = errorStacks;
+    if (length > 0) {
+      pushError(id);
+      setTimeout(() => {
+        handleError(id, callback);
+      }, duration * length);
+    } else {
+      pushError(id);
+      handleError(id, callback);
+    }
+  }
+
+  return handleContinuousError;
+}

src/service/request/index.ts

@@ -0,0 +1,11 @@
+import { createRequest } from './request';
+import { REQUEST_TIMEOUT, ContentType } from './config';
+
+export { handleResponse } from './request';
+export { ContentType };
+
+// emoss-admin
+export const adminRequest = createRequest({
+  baseURL: import.meta.env.VITE_HTTP_URL_EMOSS_ADMIN as string,
+  timeout: REQUEST_TIMEOUT
+});

src/service/request/instance.ts

@@ -0,0 +1,77 @@
+import axios from 'axios';
+import qs from 'qs';
+import { getStorageToken } from '@/utils';
+import { ElMessage } from 'element-plus';
+import type { AxiosRequestConfig, AxiosInstance } from 'axios';
+import { errorHandler } from './errorHandler';
+
+export interface StatusConfig {
+  /** 表明请求状态的属性key */
+  statusKey: string;
+  /** 请求信息的属性key */
+  msgKey: string;
+  /** 成功状态的状态码 */
+  successCode: string | number;
+}
+
+/**
+ * 封装axios请求类
+ * @author Soybean(曹理斌) 2021-03-13
+ * @class CustomAxiosInstance
+ */
+export default class CustomAxiosInstance {
+  instance: AxiosInstance;
+
+  constructor(
+    axiosConfig: AxiosRequestConfig,
+    statusConfig: StatusConfig = {
+      statusKey: 'code',
+      msgKey: 'message',
+      successCode: 200
+    }
+  ) {
+    this.instance = axios.create(axiosConfig);
+    this.setInterceptor(statusConfig);
+  }
+
+  /** 设置请求拦截器 */
+  setInterceptor(statusConfig: StatusConfig) {
+    this.instance.interceptors.request.use(
+      config => {
+        const handleConfig = { ...config };
+        // content-type为application/x-www-form-urlencoded类型的data参数需要序列化
+        if (handleConfig.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
+          handleConfig.data = qs.stringify(handleConfig.data);
+        }
+        // 设置token
+        handleConfig.headers.Authorization = getStorageToken();
+
+        return handleConfig;
+      },
+      error => {
+        errorHandler(error);
+        return Promise.reject(error);
+      }
+    );
+    this.instance.interceptors.response.use(
+      response => {
+        const { status, data } = response;
+        const { statusKey, msgKey, successCode } = statusConfig;
+        if (status === 200 || status < 300 || status === 304) {
+          if (data[statusKey] === successCode) {
+            return Promise.resolve(data.data);
+          }
+          ElMessage.error(data[msgKey]);
+          return Promise.reject(data[msgKey]);
+        }
+        const error = { response };
+        errorHandler(error);
+        return Promise.reject(error);
+      },
+      error => {
+        errorHandler(error);
+        return Promise.reject(error);
+      }
+    );
+  }
+}

src/service/request/request.ts

@@ -0,0 +1,66 @@
+import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
+import CustomAxiosInstance from './instance';
+import type { StatusConfig } from './instance';
+
+type ResponseSuccess = [null, any];
+type ResponseFail = [any, null];
+
+/**
+ * 封装各个请求方法及结果处理的类
+ * @author Soybean(曹理斌) 2021-03-15
+ * @class Request
+ */
+class Request {
+  instance: AxiosInstance;
+
+  constructor(instance: AxiosInstance) {
+    this.instance = instance;
+  }
+
+  static successHandler(response: AxiosResponse) {
+    const result: ResponseSuccess = [null, response];
+    return result;
+  }
+
+  static failHandler(error: any) {
+    const result: ResponseFail = [error, null];
+    return result;
+  }
+
+  get(url: string, config?: AxiosRequestConfig) {
+    return this.instance.get(url, config).then(Request.successHandler).catch(Request.failHandler);
+  }
+
+  post(url: string, data?: any, config?: AxiosRequestConfig) {
+    return this.instance.post(url, data, config).then(Request.successHandler).catch(Request.failHandler);
+  }
+
+  put(url: string, data?: any, config?: AxiosRequestConfig) {
+    return this.instance.put(url, data, config).then(Request.successHandler).catch(Request.failHandler);
+  }
+
+  delete(url: string, config?: AxiosRequestConfig) {
+    return this.instance.delete(url, config).then(Request.successHandler).catch(Request.failHandler);
+  }
+}
+
+export function createRequest(axiosConfig: AxiosRequestConfig, statusConfig?: StatusConfig) {
+  const customInstance = new CustomAxiosInstance(axiosConfig, statusConfig);
+  const request = new Request(customInstance.instance);
+  return request;
+}
+
+/**
+ * 对请求的结果数据进行格式化的处理
+ * @param handleFunc - 处理函数
+ * @param errors - 接收多个请求的错误
+ * @param datas - 接收多个请求的数据
+ */
+export function handleResponse<T>(handleFunc: Function, errors: any[], datas: any[]) {
+  let handleData = null;
+  if (errors.every(error => !error)) {
+    handleData = handleFunc(...datas);
+  }
+  const resError = errors.find(error => Boolean(error));
+  return [resError, handleData] as [any, T];
+}