From ed050bcab514735b7f6c5f025dc78955efaaa1a5 Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Sat, 28 Sep 2024 21:18:45 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=93=8D=E5=BA=94=E5=92=8C=E6=8B=A6=E6=88=AA?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/service/config.ts | 41 ++++++++++++++++ src/api/service/mockRequest.ts | 21 ++------- src/api/service/{index.ts => request.ts} | 60 +++++++++++------------- src/api/v1/routes.ts | 2 +- src/api/v1/system.ts | 2 +- src/api/v1/user.ts | 2 +- src/types/global.d.ts | 2 +- 7 files changed, 75 insertions(+), 55 deletions(-) create mode 100644 src/api/service/config.ts rename src/api/service/{index.ts => request.ts} (77%) diff --git a/src/api/service/config.ts b/src/api/service/config.ts new file mode 100644 index 0000000..959389b --- /dev/null +++ b/src/api/service/config.ts @@ -0,0 +1,41 @@ +import type { AxiosRequestConfig, CustomParamsSerializer } from 'axios'; +import { stringify } from 'qs'; + +export const whiteList = ['/refresh-token', '/login']; + +// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1 +export const defaultConfig: AxiosRequestConfig = { + // 默认请求地址 + baseURL: import.meta.env.VITE_BASE_API, + // 设置超时时间 + timeout: import.meta.env.VITE_BASE_API_TIMEOUT, + // @ts-expect-error + retry: import.meta.env.VITE_BASE_API_RETRY, //设置全局重试请求次数（最多重试几次请求） + retryDelay: import.meta.env.VITE_BASE_API_RETRY_DELAY, //设置全局请求间隔 + // 跨域允许携带凭证 + // withCredentials: true, + headers: { + Accept: 'application/json, text/plain, */*', + 'Content-Type': 'application/json', + 'X-Requested-With': 'XMLHttpRequest', + }, + // 数组格式参数序列化（https://github.com/axios/axios/issues/5142） + paramsSerializer: { + serialize: stringify as unknown as CustomParamsSerializer, + }, +}; + +// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1 +export const defaultMockConfig: AxiosRequestConfig = { + timeout: import.meta.env.VITE_BASE_API_TIMEOUT, + baseURL: import.meta.env.VITE_MOCK_BASE_API || '/mock', + headers: { + Accept: 'application/json, text/plain, */*', + 'Content-Type': 'application/json', + 'X-Requested-With': 'XMLHttpRequest', + }, + // 数组格式参数序列化（https://github.com/axios/axios/issues/5142） + paramsSerializer: { + serialize: stringify as unknown as CustomParamsSerializer, + }, +}; diff --git a/src/api/service/mockRequest.ts b/src/api/service/mockRequest.ts index bd9b9c2..f5cffa6 100644 --- a/src/api/service/mockRequest.ts +++ b/src/api/service/mockRequest.ts @@ -1,24 +1,9 @@ -import Axios, { type AxiosInstance, type AxiosRequestConfig, type CustomParamsSerializer } from 'axios'; +import Axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'; import type { PureHttpError, PureHttpRequestConfig, PureHttpResponse, RequestMethods } from './types'; -import { stringify } from 'qs'; import NProgress from '../../utils/progress'; import { formatToken, getToken } from '@/utils/auth'; import { useUserStoreHook } from '@/store/modules/user'; - -// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1 -const defaultConfig: AxiosRequestConfig = { - timeout: import.meta.env.VITE_BASE_API_TIMEOUT, - baseURL: import.meta.env.VITE_MOCK_BASE_API || '/mock', - headers: { - Accept: 'application/json, text/plain, */*', - 'Content-Type': 'application/json', - 'X-Requested-With': 'XMLHttpRequest', - }, - // 数组格式参数序列化（https://github.com/axios/axios/issues/5142） - paramsSerializer: { - serialize: stringify as unknown as CustomParamsSerializer, - }, -}; +import { defaultMockConfig } from '@/api/service/config'; class PureHttp { /** `token`过期后，暂存待执行的请求 */ @@ -28,7 +13,7 @@ class PureHttp { /** 初始化配置对象 */ private static initConfig: PureHttpRequestConfig = {}; /** 保存当前`Axios`实例对象 */ - private static axiosInstance: AxiosInstance = Axios.create(defaultConfig); + private static axiosInstance: AxiosInstance = Axios.create(defaultMockConfig); constructor() { this.httpInterceptorsRequest(); diff --git a/src/api/service/index.ts b/src/api/service/request.ts similarity index 77% rename from src/api/service/index.ts rename to src/api/service/request.ts index 9b8389b..94c900d 100644 --- a/src/api/service/index.ts +++ b/src/api/service/request.ts @@ -1,32 +1,11 @@ -import Axios, { type AxiosInstance, type AxiosRequestConfig, type CustomParamsSerializer } from 'axios'; +import Axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'; import type { PureHttpError, PureHttpRequestConfig, PureHttpResponse, RequestMethods } from './types'; -import { stringify } from 'qs'; import NProgress from '@/utils/progress'; -import { formatToken, getToken } from '@/utils/auth'; +import { formatToken, getToken, removeToken } from '@/utils/auth'; import { useUserStoreHook } from '@/store/modules/user'; import { message } from '@/utils/message'; - -// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1 -const defaultConfig: AxiosRequestConfig = { - // 默认请求地址 - baseURL: import.meta.env.VITE_BASE_API, - // 设置超时时间 - timeout: import.meta.env.VITE_BASE_API_TIMEOUT, - // @ts-expect-error - retry: import.meta.env.VITE_BASE_API_RETRY, //设置全局重试请求次数（最多重试几次请求） - retryDelay: import.meta.env.VITE_BASE_API_RETRY_DELAY, //设置全局请求间隔 - // 跨域允许携带凭证 - // withCredentials: true, - headers: { - Accept: 'application/json, text/plain, */*', - 'Content-Type': 'application/json', - 'X-Requested-With': 'XMLHttpRequest', - }, - // 数组格式参数序列化（https://github.com/axios/axios/issues/5142） - paramsSerializer: { - serialize: stringify as unknown as CustomParamsSerializer, - }, -}; +import { router } from '@/store/utils'; +import { defaultConfig, whiteList } from '@/api/service/config'; class PureHttp { /** `token`过期后，暂存待执行的请求 */ @@ -96,7 +75,6 @@ class PureHttp { return config; } /** 请求白名单，放置一些不需要`token`的接口（通过设置请求白名单，防止`token`过期后再请求造成的死循环问题） */ - const whiteList = ['/refresh-token', '/login']; return whiteList.some(url => config.url.endsWith(url)) ? config : new Promise(resolve => { @@ -142,27 +120,43 @@ class PureHttp { instance.interceptors.response.use( (response: PureHttpResponse) => { const $config = response.config; + const data = response.data; + // 关闭进度条动画 NProgress.done(); + + // 登录过期，和异常处理 + if (data.code === 208) { + message(data.message, { type: 'warning' }); + router.push('/').then(); + removeToken(); + } else if (data.code >= 209 && data.code < 300) { + message(data.message, { type: 'warning' }); + } else if (data.code > 300) { + message(data.message, { type: 'error' }); + } + // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调 if (typeof $config.beforeResponseCallback === 'function') { $config.beforeResponseCallback(response); - return response.data; + return data; } + if (PureHttp.initConfig.beforeResponseCallback) { PureHttp.initConfig.beforeResponseCallback(response); - return response.data; + return data; } - return response.data; + + return data; }, (error: PureHttpError) => { - const $error = error; - $error.isCancelRequest = Axios.isCancel($error); + error.isCancelRequest = Axios.isCancel(error); + // 关闭进度条动画 NProgress.done(); message(error.message, { type: 'error' }); - // 所有的响应异常 区分来源为取消请求/非取消请求 - return $error; + + return error; }, ); } diff --git a/src/api/v1/routes.ts b/src/api/v1/routes.ts index 4b86897..be5a737 100644 --- a/src/api/v1/routes.ts +++ b/src/api/v1/routes.ts @@ -1,4 +1,4 @@ -import { http } from '@/api/service'; +import { http } from '@/api/service/request'; import type { BaseResult } from '@/types/BaseResult'; export const getRouterAsync = () => { diff --git a/src/api/v1/system.ts b/src/api/v1/system.ts index 6cbec3f..ad533d0 100644 --- a/src/api/v1/system.ts +++ b/src/api/v1/system.ts @@ -1,4 +1,4 @@ -import { http } from '@/api/service'; +import { http } from '@/api/service/request'; import type { BaseResult } from '@/types/BaseResult'; type ResultTable = { diff --git a/src/api/v1/user.ts b/src/api/v1/user.ts index 0adbc4b..f5f90d8 100644 --- a/src/api/v1/user.ts +++ b/src/api/v1/user.ts @@ -1,4 +1,4 @@ -import { http } from '@/api/service'; +import { http } from '@/api/service/request'; import type { BaseResult } from '@/types/BaseResult'; export interface UserResult { diff --git a/src/types/global.d.ts b/src/types/global.d.ts index f7fce14..41b2773 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -175,7 +175,7 @@ declare global { * 扩展 `Element` */ interface Element { - // v-ripple 作用于 src/directives/ripple/index.ts 文件 + // v-ripple 作用于 src/directives/ripple/request.ts 文件 _ripple?: { enabled?: boolean; centered?: boolean;