From 32381408bbe418eeaca2a975305bac80ddaa03f5 Mon Sep 17 00:00:00 2001 From: hongxinzz <510348414@qq.com> Date: Thu, 4 May 2023 14:20:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20axios=20=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/axios/config.ts | 67 ++++++++++++++++-- src/config/axios/index.ts | 69 +++++++++--------- src/config/axios/service.ts | 136 ++++++++++++------------------------ src/config/axios/type.ts | 10 ++- 4 files changed, 147 insertions(+), 135 deletions(-) diff --git a/src/config/axios/config.ts b/src/config/axios/config.ts index d6c257d51..c098f0130 100644 --- a/src/config/axios/config.ts +++ b/src/config/axios/config.ts @@ -1,4 +1,12 @@ -import { AxiosConfig, AxiosResponse } from './type' +import { + AxiosConfig, + AxiosResponse, + AxiosRequestHeaders, + AxiosError, + InternalAxiosRequestConfig +} from './type' +import { ElMessage } from 'element-plus' +import qs from 'qs' const config: AxiosConfig = { /** @@ -21,7 +29,7 @@ const config: AxiosConfig = { /** * 接口成功返回状态码 */ - code: '0000', + code: 0, /** * 接口请求超时时间 @@ -35,14 +43,59 @@ const config: AxiosConfig = { defaultHeaders: 'application/json', interceptors: { - requestInterceptors: (config) => { - return config - }, + //请求拦截 + // requestInterceptors: (config) => { + // return config + // }, // 响应拦截器 - responseInterceptors: (result: AxiosResponse) => { - return result + // responseInterceptors: (result: AxiosResponse) => { + // return result + // } + } +} + +const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => { + if ( + config.method === 'post' && + (config.headers as AxiosRequestHeaders)['Content-Type'] === 'application/x-www-form-urlencoded' + ) { + config.data = qs.stringify(config.data) + } + if (config.method === 'get' && config.params) { + let url = config.url as string + url += '?' + const keys = Object.keys(config.params) + for (const key of keys) { + if (config.params[key] !== void 0 && config.params[key] !== null) { + url += `${key}=${encodeURIComponent(config.params[key])}&` + } } + url = url.substring(0, url.length - 1) + config.params = {} + config.url = url } + return config +} +;(error: AxiosError) => { + console.log(error) + Promise.reject(error) +} + +const defaultResponseInterceptors = (response: AxiosResponse) => { + if (response?.config?.responseType === 'blob') { + // 如果是文件流，直接过 + return response + } else if (response.data.code === config.code) { + return response.data + } else { + ElMessage.error(response.data.message) + } +} +;(error: AxiosError) => { + console.log('err' + error) // for debug + ElMessage.error(error.message) + return Promise.reject(error) } +export { defaultResponseInterceptors, defaultRequestInterceptors } export default config diff --git a/src/config/axios/index.ts b/src/config/axios/index.ts index 7a380e0e2..475eaa469 100644 --- a/src/config/axios/index.ts +++ b/src/config/axios/index.ts @@ -1,37 +1,40 @@ -// import { service } from './service' +import service from './service' -// import { RequestConfig } from "./config" +import config from './config' -// import { config } from './config' +const { defaultHeaders } = config -// const { default_headers } = config +const request = (option: any) => { + const { url, method, params, data, headersType, responseType } = option + return service.request({ + url: url, + method, + params, + data, + responseType: responseType, + headers: { + 'Content-Type': headersType || defaultHeaders + } + }) +} -// const request = (option: any) => { -// const { url, method, params, data, headersType, responseType } = option -// return service({ -// url: url, -// method, -// params, -// data, -// responseType: responseType, -// headers: { -// 'Content-Type': headersType || default_headers -// } -// }) -// } -// export default { -// get: (option: any) => { -// return request({ method: 'get', ...option }) as unknown as T -// }, -// post: (option: any) => { -// return request({ method: 'post', ...option }) as unknown as T -// }, -// delete: (option: any) => { -// return request({ method: 'delete', ...option }) as unknown as T -// }, -// put: (option: any) => { -// return request({ method: 'put', ...option }) as unknown as T -// } -// } - -export {} +export default { + get: (option: any) => { + return request({ method: 'get', ...option }) as unknown as T + }, + post: (option: any) => { + return request({ method: 'post', ...option }) as unknown as T + }, + delete: (option: any) => { + return request({ method: 'delete', ...option }) as unknown as T + }, + put: (option: any) => { + return request({ method: 'put', ...option }) as unknown as T + }, + cancelRequest: (url: string | string[]) => { + return service.cancelRequest(url) + }, + cancelAllRequest: () => { + return service.cancelAllRequest() + } +} diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts index 2aa57f5b7..da82d6ca6 100644 --- a/src/config/axios/service.ts +++ b/src/config/axios/service.ts @@ -1,82 +1,19 @@ -// import qs from 'qs' - import axios from 'axios' -import config from './config' -import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type' - -// import { ElMessage } from 'element-plus' - -// const { result_code, base_url } = config - -// export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH] - -// // 创建axios实例 -// const service: AxiosInstance = axios.create({ -// baseURL: PATH_URL, // api 的 base_url -// timeout: config.request_timeout // 请求超时时间 -// }) - -// // request拦截器 -// service.interceptors.request.use( -// (config: InternalAxiosRequestConfig) => { -// if ( -// config.method === 'post' && -// (config.headers as AxiosRequestHeaders)['Content-Type'] === -// 'application/x-www-form-urlencoded' -// ) { -// config.data = qs.stringify(config.data) -// } -// // ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test' -// // get参数编码 -// if (config.method === 'get' && config.params) { -// let url = config.url as string -// url += '?' -// const keys = Object.keys(config.params) -// for (const key of keys) { -// if (config.params[key] !== void 0 && config.params[key] !== null) { -// url += `${key}=${encodeURIComponent(config.params[key])}&` -// } -// } -// url = url.substring(0, url.length - 1) -// config.params = {} -// config.url = url -// } -// return config -// }, -// (error: AxiosError) => { -// // Do something with request error -// console.log(error) // for debug -// Promise.reject(error) -// } -// ) +import config, { defaultRequestInterceptors, defaultResponseInterceptors } from './config' -// // response 拦截器 -// service.interceptors.response.use( -// (response: AxiosResponse) => { -// if (response.config.responseType === 'blob') { -// // 如果是文件流，直接过 -// return response -// } else if (response.data.code === result_code) { -// return response.data -// } else { -// ElMessage.error(response.data.message) -// } -// }, -// (error: AxiosError) => { -// console.log('err' + error) // for debug -// ElMessage.error(error.message) -// return Promise.reject(error) -// } -// ) +import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type' -// export { service } +const { interceptors, baseUrl } = config +export const PATH_URL = baseUrl[import.meta.env.VITE_API_BASEPATH] -const { interceptors } = config const { requestInterceptors, responseInterceptors } = interceptors const abortControllerMap: Map = new Map() -const axiosInstance: AxiosInstance = axios.create(config) +const axiosInstance: AxiosInstance = axios.create({ + ...config, + baseURL: PATH_URL +}) axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => { const controller = new AbortController() @@ -86,8 +23,6 @@ axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => { return res }) -axiosInstance.interceptors.request.use(requestInterceptors, responseInterceptors) - axiosInstance.interceptors.response.use( (res: AxiosResponse) => { const url = res.config.url || '' @@ -97,22 +32,39 @@ axiosInstance.interceptors.response.use( (err: any) => err ) -// const request = (config: RequestConfig) => { -// return new Promise((resolve, reject) => { -// if (config.interceptors?.requestInterceptors) { -// config = config.interceptors.requestInterceptors(config as any) -// } -// axiosInstance -// .request(config) -// .then((res) => { -// if (config.interceptors?.responseInterceptors) { -// res = config.interceptors.responseInterceptors(res) -// } - -// resolve(res) -// }) -// .catch((err: any) => { -// reject(err) -// }) -// }) -// } +axiosInstance.interceptors.request.use(requestInterceptors || defaultRequestInterceptors) +axiosInstance.interceptors.response.use(responseInterceptors || defaultResponseInterceptors) + +const service = { + request: (config: RequestConfig) => { + return new Promise((resolve, reject) => { + if (config.interceptors?.requestInterceptors) { + config = config.interceptors.requestInterceptors(config as any) + } + + axiosInstance + .request(config) + .then((res) => { + resolve(res) + }) + .catch((err: any) => { + reject(err) + }) + }) + }, + cancelRequest: (url: string | string[]) => { + const urlList = Array.isArray(url) ? url : [url] + for (const _url of urlList) { + abortControllerMap.get(_url)?.abort() + abortControllerMap.delete(_url) + } + }, + cancelAllRequest() { + for (const [_, controller] of abortControllerMap) { + controller.abort() + } + abortControllerMap.clear() + } +} + +export default service diff --git a/src/config/axios/type.ts b/src/config/axios/type.ts index f3cd190d9..b900c17c6 100644 --- a/src/config/axios/type.ts +++ b/src/config/axios/type.ts @@ -2,7 +2,9 @@ import type { InternalAxiosRequestConfig, AxiosResponse, AxiosRequestConfig, - AxiosInstance + AxiosInstance, + AxiosRequestHeaders, + AxiosError } from 'axios' interface RequestInterceptors { @@ -20,7 +22,7 @@ interface AxiosConfig { pro: string test: string } - code: number | string + code: number defaultHeaders: AxiosHeaders timeout: number interceptors: RequestInterceptors @@ -36,5 +38,7 @@ export { RequestConfig, AxiosConfig, AxiosInstance, - InternalAxiosRequestConfig + InternalAxiosRequestConfig, + AxiosRequestHeaders, + AxiosError }