diff --git a/.env-config.ts b/.env-config.ts index 10d8c29..7c58faf 100644 --- a/.env-config.ts +++ b/.env-config.ts @@ -4,23 +4,23 @@ type ServiceEnv = Record; /** 不同请求服务的环境配置 */ const serviceEnv: ServiceEnv = { dev: { - url: 'http://localhost:8080', + url: 'https://mock.mengxuegu.com/mock/61e4df7c17249f68847fc191/api', urlPattern: '/url-pattern', secondUrl: 'http://localhost:8081', - secondUrlPattern: '/second-url-pattern' + secondUrlPattern: '/second-url-pattern', }, test: { url: 'http://localhost:8080', urlPattern: '/url-pattern', secondUrl: 'http://localhost:8081', - secondUrlPattern: '/second-url-pattern' + secondUrlPattern: '/second-url-pattern', }, prod: { url: 'http://localhost:8080', urlPattern: '/url-pattern', secondUrl: 'http://localhost:8081', - secondUrlPattern: '/second-url-pattern' - } + secondUrlPattern: '/second-url-pattern', + }, }; /** diff --git a/.env.development b/.env.development index 3478013..7e79c65 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -VITE_HTTP_PROXY=Y \ No newline at end of file +VITE_HTTP_PROXY=N \ No newline at end of file diff --git a/src/service/api/index.ts b/src/service/api/index.ts new file mode 100644 index 0000000..6cc1e6e --- /dev/null +++ b/src/service/api/index.ts @@ -0,0 +1 @@ +export * from './login'; diff --git a/src/service/api/login.ts b/src/service/api/login.ts new file mode 100644 index 0000000..58c2efd --- /dev/null +++ b/src/service/api/login.ts @@ -0,0 +1,25 @@ +import { request } from '../http'; + +interface Itest { + data: string; +} +/* get方法测试 */ +export function fetachGet() { + return request.get('/getAPI'); +} +/* post方法测试 */ +export function fetachPost(params: Itest) { + return request.post('/postAPI', params); +} +/* delete方法测试 */ +export function fetachDelete() { + return request.Delete('/deleteAPI'); +} +/* put方法测试 */ +export function fetachPut(params: Itest) { + return request.put('/putAPI', params); +} +/* patch方法测试 */ +export function fetachPatch(params: Itest) { + return request.patch('/patchAPI', params); +} diff --git a/src/service/http/index.ts b/src/service/http/index.ts new file mode 100644 index 0000000..8cf2169 --- /dev/null +++ b/src/service/http/index.ts @@ -0,0 +1,10 @@ +import { getServiceEnvConfig } from '~/.env-config'; +import { createRequest } from './request'; + +const { url, urlPattern, secondUrl, secondUrlPattern } = getServiceEnvConfig(import.meta.env); + +const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y'; + +export const request = createRequest({ baseURL: isHttpProxy ? urlPattern : url }); + +// export const secondRequest = createRequest({ baseURL: isHttpProxy ? secondUrlPattern : secondUrl }); diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts new file mode 100644 index 0000000..f0abde0 --- /dev/null +++ b/src/service/http/instance.ts @@ -0,0 +1,105 @@ +import axios from 'axios'; +import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; + +/** + * @description: 封装axios请求类 + */ +export default class createAxiosInstance { + // axios 实例 + instance: AxiosInstance; + // 后台字段配置 + backendConfig: Service.BackendResultConfig; + // 基础配置 + axiosConfig: AxiosRequestConfig = {}; + + constructor( + axiosConfig: AxiosRequestConfig, + backendConfig: Service.BackendResultConfig = { + codeKey: 'code', + dataKey: 'data', + msgKey: 'msg', + successCode: '200', + }, + ) { + this.backendConfig = backendConfig; + // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置 + this.instance = axios.create({ timeout: 60000, ...axiosConfig }); + + this.setInterceptor(); + } + + // 设置类拦截器 + setInterceptor() { + this.instance.interceptors.request.use( + (config: AxiosRequestConfig) => { + // 一般会请求拦截里面加token + // const token = localStorage.getItem('token') as string; + // config.headers!.Authorization = token; + return config; + }, + (err: any) => Promise.reject(err), + ); + this.instance.interceptors.response.use( + // 因为接口的数据都在res.data下，所以直接返回res.data + // 系统如果有自定义code也可以在这里处理 + (res: AxiosResponse) => { + // apiData 是 API 返回的数据 + const apiData = res.data; + // 这个 Code 是和后端约定的业务 Code + const code = String(res.data[this.backendConfig.codeKey]); + switch (code) { + case this.backendConfig.successCode: + // code === 200 代表没有错误,直接返回约定的数据内容 + return apiData[this.backendConfig.dataKey]; + default: + // 不是正确的 Code,返回错误提示信息 + return Promise.reject(new Error(`Error:${this.backendConfig.dataKey}`)); + } + }, + (err: any) => { + // 这里用来处理http常见错误，进行全局提示 + let message = ''; + switch (err.response.status) { + case 400: + message = '请求错误(400)'; + break; + case 401: + message = '未授权，请重新登录(401)'; + // 这里可以做清空storage并跳转到登录页的操作 + break; + case 403: + message = '拒绝访问(403)'; + break; + case 404: + message = '请求出错(404)'; + break; + case 408: + message = '请求超时(408)'; + break; + case 500: + message = '服务器错误(500)'; + break; + case 501: + message = '服务未实现(501)'; + break; + case 502: + message = '网络错误(502)'; + break; + case 503: + message = '服务不可用(503)'; + break; + case 504: + message = '网络超时(504)'; + break; + case 505: + message = 'HTTP版本不受支持(505)'; + break; + default: + message = `连接出错(${err.response.status})!`; + } + // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可 + return Promise.reject(err.response); + }, + ); + } +} diff --git a/src/service/http/request.ts b/src/service/http/request.ts new file mode 100644 index 0000000..33845f1 --- /dev/null +++ b/src/service/http/request.ts @@ -0,0 +1,83 @@ +import type { AxiosRequestConfig } from 'axios'; +import createAxiosInstance from './instance'; + +/** + * @description: + * @param {AxiosRequestConfig} axiosConfig - axios配置 + * @param {Service} backendConfig - 后台字段配置 + * @return {*} + */ +export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig) { + const axiosInstance = new createAxiosInstance(axiosConfig, backendConfig); + const { instance } = axiosInstance; + + /** + * @description: 通用请求方法 + * @param {string} url- 请求地址 + * @param {RequestMethod} method - 请求方法 + * @param {any} data - 请求数据体 + * @param {AxiosRequestConfig} config - 请求配置 + * @return {*} + */ + type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch'; + const request = async (url: string, method: RequestMethod = 'get', data: any, config?: AxiosRequestConfig) => { + return instance(url, { method, data, ...config }); + }; + + /** + * @description: get请求 + * @param {string} url - 请求地址 + * @return {*} + */ + const get = async (url: string, config?: AxiosRequestConfig) => { + return instance.get(url, config); + }; + + /** + * post请求 + * @param url - 请求地址 + * @param data - 请求的body的data + * @param config - axios配置 + */ + const post = async (url: string, data?: any, config?: AxiosRequestConfig) => { + return instance.post(url, data, config); + }; + + /** + * Delete请求 + * @param url - 请求地址 + * @param config - axios配置 + */ + const Delete = async (url: string, config?: AxiosRequestConfig) => { + return instance.delete(url, config); + }; + + /** + * put请求 + * @param url - 请求地址 + * @param data - 请求的body的data + * @param config - axios配置 + */ + const put = async (url: string, data?: any, config?: AxiosRequestConfig) => { + return instance.put(url, data, config); + }; + + /** + * patch请求 + * @param url - 请求地址 + * @param data - 请求的body的data + * @param config - axios配置 + */ + const patch = async (url: string, data?: any, config?: AxiosRequestConfig) => { + return instance.patch(url, data, config); + }; + + return { + request, + get, + post, + Delete, + put, + patch, + }; +} diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/http/instance.ts b/src/utils/http/instance.ts deleted file mode 100644 index a207570..0000000 --- a/src/utils/http/instance.ts +++ /dev/null @@ -1,54 +0,0 @@ -import axios from 'axios'; -import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; - -/** - * @description: 封装axios请求类 - */ -export default class createAxiosInstance { - // axios 实例 - instance: AxiosInstance; - // 后台字段配置 - backendConfig: Service.BackendResultConfig; - // 基础配置，url和超时时间 - baseConfig: AxiosRequestConfig = { baseURL: '/api', timeout: 60000 }; - - constructor( - config: AxiosRequestConfig, - backendConfig: Service.BackendResultConfig = { - codeKey: 'code', - dataKey: 'data', - msgKey: 'msg', - successCode: '200', - }, - ) { - this.backendConfig = backendConfig; - this.instance = axios.create(config); - this.setInterceptor(); - } - - // 设置类拦截器 - setInterceptor() { - this.instance.interceptors.request.use( - (config: AxiosRequestConfig) => { - // 一般会请求拦截里面加token - console.log('全局请求拦截器'); - return config; - }, - (err: any) => err, - ); - this.instance.interceptors.response.use( - // 因为接口的数据都在res.data下，所以直接返回res.data - // 系统如果有自定义code也可以在这里处理 - (res: AxiosResponse) => { - console.log('全局响应拦截器'); - return res.data; - }, - (err: any) => { - // 这里用来处理http常见错误，进行全局提示 - console.log('错误状态码：', err.response.status); - // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可 - return Promise.reject(err.response); - }, - ); - } -} diff --git a/src/utils/http/request.ts b/src/utils/http/request.ts deleted file mode 100644 index a691dbd..0000000 --- a/src/utils/http/request.ts +++ /dev/null @@ -1,58 +0,0 @@ -import type { AxiosInstance, AxiosRequestConfig } from 'axios'; -import createAxiosInstance from './instance'; - -type RequestMethod = 'get' | 'post' | 'put' | 'delete'; - -// 获取aixos请求方法 -async function getRequestResponse( - instance: AxiosInstance, - method: RequestMethod, - url: string, - data?: any, - config?: AxiosRequestConfig, -) { - let res: any; - if (method === 'get' || method === 'delete') { - res = await instance[method](url, config); - } else { - res = await instance[method](url, data, config); - } - return res; -} - -interface RequestParam { - url: string; - method?: RequestMethod; - data?: any; - axiosConfig?: AxiosRequestConfig; -} - -export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig) { - const axiosInstance = new createAxiosInstance(axiosConfig, backendConfig); - - /** - * 异步promise请求 - * @param param - 请求参数 - * - url: 请求地址 - * - method: 请求方法(默认get) - * - data: 请求的body的data - * - axiosConfig: axios配置 - */ - async function asyncRequest(param: RequestParam) { - const { instance } = axiosInstance; - const method = param.method || 'get'; - const { url } = param; - const res = await getRequestResponse(instance, method, url, param.data, param.axiosConfig); - return res; - } - - /** - * @description: get请求 - * @param {string} url - * @param {AxiosRequestConfig} config - * @return {*} - */ - function get(url: string, config: AxiosRequestConfig) { - return asyncRequest({ url, method: 'get', axiosConfig: config }); - } -} diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 5aa101a..537ddb4 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -2,7 +2,8 @@

{{ msg }}

- Already configured: vue3、vite3、unocss、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router + Already configured: + vue3、vite3、unocss、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router、axios
Go to layout
diff --git a/src/views/test/test1.vue b/src/views/test/test1.vue index 55d0bfb..b79a171 100644 --- a/src/views/test/test1.vue +++ b/src/views/test/test1.vue @@ -1,12 +1,55 @@