From bb83550fe19867dfc7c9843068ec6b6676ab9e29 Mon Sep 17 00:00:00 2001 From: h_mo <596417202@qq.com> Date: Wed, 29 Mar 2023 20:07:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B9=E7=94=A8alova=E8=AF=B7?= =?UTF-8?q?=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- .env.production | 3 +- package.json | 4 +- src/enums/httpEnum.ts | 12 ++++ src/services/model/baseModel.d.ts | 4 +- src/utils/env.ts | 1 - src/utils/http/checkStatus.ts | 51 +++++++++++++ src/utils/http/index.ts | 116 +++++++++++++++++------------- 8 files changed, 136 insertions(+), 57 deletions(-) create mode 100644 src/utils/http/checkStatus.ts diff --git a/.env.development b/.env.development index 8ed0d0c..79be671 100644 --- a/.env.development +++ b/.env.development @@ -4,7 +4,7 @@ VITE_ENV = development VITE_PORT = 3000 # BASE_URL -VITE_BASE_URL = https://api-catch.ranesuangyu.top +VITE_BASE_URL = /api/v1 # 上传域名 VITE_UPLOAD_URL = /upload diff --git a/.env.production b/.env.production index b1c6c19..bfcff09 100644 --- a/.env.production +++ b/.env.production @@ -2,7 +2,6 @@ VITE_ENV = production # api域名 -VITE_BASE_URL = https://api-catch.ranesuangyu.top - +VITE_BASE_URL = /api/v1 # 上传域名 VITE_UPLOAD_URL = /upload diff --git a/package.json b/package.json index 6d6cb6c..2cb110c 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "prepare": "husky install" }, "dependencies": { + "@alova/adapter-uniapp": "^1.1.1", + "@alova/mock": "^1.2.2", "@dcloudio/uni-app": "3.0.0-alpha-3071220230324001", "@dcloudio/uni-app-plus": "3.0.0-alpha-3071220230324001", "@dcloudio/uni-components": "3.0.0-alpha-3071220230324001", @@ -52,10 +54,10 @@ "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3071220230324001", "@fortawesome/fontawesome-free": "^6.4.0", "@iconify/iconify": "^3.1.0", + "alova": "^2.0.9", "crypto-js": "^4.1.1", "echarts": "^5.4.2", "lodash-es": "^4.17.21", - "luch-request": "^3.0.8", "pinia": "^2.0.33", "qs": "^6.11.1", "vue": "^3.2.47" diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts index 67f5822..4d6427b 100644 --- a/src/enums/httpEnum.ts +++ b/src/enums/httpEnum.ts @@ -7,3 +7,15 @@ export enum ResultEnum { TIMEOUT = 401, TYPE = 'success', } + +/** + * @description: contentType + */ +export enum ContentTypeEnum { + // json + JSON = 'application/json;charset=UTF-8', + // form-data qs + FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8', + // form-data upload + FORM_DATA = 'multipart/form-data;charset=UTF-8', +} diff --git a/src/services/model/baseModel.d.ts b/src/services/model/baseModel.d.ts index 3e8a577..2d96d92 100644 --- a/src/services/model/baseModel.d.ts +++ b/src/services/model/baseModel.d.ts @@ -1,5 +1,7 @@ +import { ResultEnum } from '@/enums/httpEnum'; + declare interface API { - code: number; + code: ResultEnum; data?: T; message: string; } diff --git a/src/utils/env.ts b/src/utils/env.ts index 9847900..9a2c873 100644 --- a/src/utils/env.ts +++ b/src/utils/env.ts @@ -61,7 +61,6 @@ export function isProdMode(): boolean { * @example: */ export function getBaseUrl(): string { - if (judgePlatform(PLATFORMS.H5) && isDevMode()) return '/api'; return getEnvValue('VITE_BASE_URL'); } diff --git a/src/utils/http/checkStatus.ts b/src/utils/http/checkStatus.ts new file mode 100644 index 0000000..e3b3de9 --- /dev/null +++ b/src/utils/http/checkStatus.ts @@ -0,0 +1,51 @@ +import { Toast } from '@/utils/uniapi/prompt'; + +export function checkStatus(status: number, msg: string): void { + let errMessage = null; + switch (status) { + case 400: + errMessage = `${msg}`; + break; + // 401: Not logged in + // Jump to the login page if not logged in, and carry the path of the current page + // Return to the current page after successful login. This step needs to be operated on the login page. + case 401: + errMessage = '用户没有权限（令牌、用户名、密码错误）!'; + break; + case 403: + errMessage = '用户得到授权，但是访问是被禁止的!'; + break; + case 404: + errMessage = '网络请求错误,未找到该资源!'; + break; + case 405: + errMessage = '网络请求错误,请求方法未允许!'; + break; + case 408: + errMessage = '网络请求超时!'; + break; + case 500: + errMessage = '服务器错误,请联系管理员!'; + break; + case 501: + errMessage = '网络未实现!'; + break; + case 502: + errMessage = '服务不可用，服务器暂时过载或维护!'; + break; + case 503: + errMessage = '服务不可用，服务器暂时过载或维护!'; + break; + case 504: + errMessage = '网络超时!'; + break; + case 505: + errMessage = 'http版本不支持该请求!'; + break; + default: + } + + if (errMessage) { + Toast(errMessage); + } +} diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts index 7ebfed5..61149b9 100644 --- a/src/utils/http/index.ts +++ b/src/utils/http/index.ts @@ -1,65 +1,79 @@ -import Request from 'luch-request'; -import { assign } from 'lodash-es'; -import { Toast } from '@/utils/uniapi/prompt'; +import { createAlova } from 'alova'; +import AdapterUniapp from '@alova/adapter-uniapp'; import { getBaseUrl } from '@/utils/env'; +import { mockAdapter } from '@/mock'; +import { assign } from 'lodash-es'; import { useAuthStore } from '@/state/modules/auth'; -import { ResultEnum } from '@/enums/httpEnum'; +import { checkStatus } from '@/utils/http/checkStatus'; +import { ContentTypeEnum, ResultEnum } from '@/enums/httpEnum'; +import { Toast } from '@/utils/uniapi/prompt'; +import { API } from '@/services/model/baseModel'; const BASE_URL = getBaseUrl(); + const HEADER = { - 'Content-Type': 'application/json;charset=UTF-8;', + 'Content-Type': ContentTypeEnum.JSON, Accept: 'application/json, text/plain, */*', }; -function createRequest() { - return new Request({ - baseURL: BASE_URL, - header: HEADER, - custom: { - auth: true, - }, - }); -} - -const request = createRequest(); +// @ts-ignore /** - * 请求拦截器 + * alova 请求实例 + * @link https://github.com/alovajs/alova */ -request.interceptors.request.use( - (options) => { - if (options.custom?.auth) { - const authStore = useAuthStore(); - if (!authStore.isLogin) { - Toast('请先登录'); - // token不存在跳转到登录页 - return Promise.reject(options); +const alovaInstance = createAlova({ + baseURL: BASE_URL, + ...AdapterUniapp({ + mockRequest: mockAdapter, + }), + timeout: 5000, + beforeRequest: (method) => { + const authStore = useAuthStore(); + method.config.headers = assign(method.config.headers, HEADER, authStore.getAuthorization); + }, + responsed: { + /** + * 请求成功的拦截器 + * 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息 + * @param response + * @param method + */ + onSuccess: async (response, method) => { + const { config } = method; + const { enableDownload, enableUpload } = config; + // @ts-ignore + const { statusCode, data: rawData } = response; + const { code, message, data } = rawData as API; + if (statusCode === 200) { + if (enableDownload) { + // 下载处理 + return rawData; + } + if (enableUpload) { + // 上传处理 + return rawData; + } + if (code === ResultEnum.SUCCESS) { + return data as any; + } + message && Toast(message); + return Promise.reject(rawData); } - options.header = assign(options.header, { - authorization: `Bearer ${authStore.getToken}`, - }); - } - return options; - }, - (options) => Promise.reject(options) -); + checkStatus(statusCode, message || ''); + return Promise.reject(rawData); + }, -/** - * 响应拦截器 - */ -request.interceptors.response.use( - async (response) => { - const { data: resData } = response; - const { code, message } = resData; - if (code === ResultEnum.SUCCESS) { - return resData as any; - } - Toast(message); - return Promise.reject(resData); + /** + * 请求失败的拦截器，请求错误时将会进入该拦截器。 + * 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息 + * @param err + * @param method + */ + onError: (err, method) => { + // error('Request Error!'); + return Promise.reject({ err, method }); + }, }, - (response) => - // 请求错误做点什么。可以使用async await 做异步操作 - // error('Request Error!'); - Promise.reject(response) -); +}); -export { request }; +export const request = alovaInstance;