xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2026-02-11 08:34:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor all pages with @sa/alova

Browse Source
This commit is contained in:
胡镇
2024-10-09 16:06:41 +08:00
parent d8ec43bc6c
commit 8d6d1865f6
22 changed files with 237 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/alova/package.json
View File

@@ -12,6 +12,6 @@
},
"dependencies": {
"@sa/utils": "workspace:*",
"alova": "^3.0.16"
"alova": "^3.0.19"
}
}

3
packages/alova/src/constant.ts
View File

@@ -1,5 +1,2 @@
/** request id key */
export const REQUEST_ID_KEY = 'X-Request-Id';
/** the backend error code key */
export const BACKEND_ERROR_CODE = 'BACKEND_ERROR';

102
packages/alova/src/index.ts
View File

@@ -1,86 +1,76 @@
import type { AlovaDefaultCacheAdapter, AlovaGenerics, AlovaGlobalCacheAdapter, AlovaRequestAdapter } from 'alova';
import { createAlova } from 'alova';
import VueHook from 'alova/vue';
import type { FetchRequestInit } from 'alova/fetch';
import adapterFetch from 'alova/fetch';
import { createServerTokenAuthentication } from 'alova/client';
import { BACKEND_ERROR_CODE, REQUEST_ID_KEY } from './constant';
import { isJSON } from './shared';
import { BACKEND_ERROR_CODE } from './constant';
import type { CustomAlovaConfig, RequestOptions } from './type';
export const createAlovaRequest = (customConfig: CustomAlovaConfig<any>, options: RequestOptions<any>) => {
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
export const createAlovaRequest = <
RequestConfig = FetchRequestInit,
ResponseType = Response,
ResponseHeader = Headers,
L1Cache extends AlovaGlobalCacheAdapter = AlovaDefaultCacheAdapter,
L2Cache extends AlovaGlobalCacheAdapter = AlovaDefaultCacheAdapter
>(
customConfig: CustomAlovaConfig<
AlovaGenerics<any, any, RequestConfig, ResponseType, ResponseHeader, L1Cache, L2Cache, any>
>,
options: RequestOptions<AlovaGenerics<any, any, RequestConfig, ResponseType, ResponseHeader, L1Cache, L2Cache, any>>
) => {
const { tokenRefresher } = options;
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<
typeof VueHook,
AlovaRequestAdapter<RequestConfig, ResponseType, ResponseHeader>
>({
refreshTokenOnSuccess: {
isExpired: async response => {
const contentType = response.headers.get('Content-Type');
if (isJSON(contentType ?? '')) {
const resp = response.clone();
const data = await resp.json();
const responseCode = String(data.code);
if (customConfig.expiredTokenCodes.includes(responseCode)) {
return true;
}
}
return false;
},
handler: async () => {
if (options.refreshTokenHandler) {
await options.refreshTokenHandler();
}
}
isExpired: (response, method) => tokenRefresher?.isExpired(response, method) || false,
handler: async (response, method) => tokenRefresher?.handler(response, method)
},
refreshTokenOnError: {
isExpired: async response => {
const contentType = response.headers.get('Content-Type');
if (isJSON(contentType ?? '')) {
const resp = response.clone();
const data = await resp.json();
const responseCode = String(data.code);
if (customConfig.expiredTokenCodes.includes(responseCode)) {
return true;
}
}
return false;
},
handler: async () => {
if (options.refreshTokenHandler) {
await options.refreshTokenHandler();
}
}
isExpired: (response, method) => tokenRefresher?.isExpired(response, method) || false,
handler: async (response, method) => tokenRefresher?.handler(response, method)
}
});
const instance = createAlova({
...customConfig,
timeout: customConfig.timeout ?? 10 * 1000,
requestAdapter: customConfig.requestAdapter ?? adapterFetch(),
requestAdapter: (customConfig.requestAdapter as any) ?? adapterFetch(),
statesHook: VueHook,
beforeRequest: onAuthRequired(options.onRequest),
beforeRequest: onAuthRequired(options.onRequest as any),
responded: onResponseRefreshToken({
onSuccess: async resp => {
onSuccess: async (response, method) => {
// check if http status is success
if (resp.ok || resp.status === 304) {
if (
!isJSON(resp.headers.get('Content-Type') ?? '') ||
(options.isBackendSuccess && (await options.isBackendSuccess(resp)))
) {
return options.transformBackendResponse ? await options.transformBackendResponse(resp) : resp;
}
if (options.onBackendFail) {
const fail = await options.onBackendFail(resp);
if (fail) {
return fail;
}
let error: any = null;
let transformedData: any = null;
try {
if (await options.isBackendSuccess(response)) {
transformedData = await options.transformBackendResponse(response);
} else {
error = new Error('the backend request error');
error.code = BACKEND_ERROR_CODE;
}
} catch (err) {
error = err;
}
throw new Error(resp.statusText);
if (error) {
await options.onError?.(error, response, method);
throw error;
}
return transformedData;
},
onComplete: options.onComplete,
onError: options.onError
onError: (error, method) => options.onError?.(error, null, method)
})
});
return instance;
};
export { BACKEND_ERROR_CODE, REQUEST_ID_KEY };
export { BACKEND_ERROR_CODE };
export type * from './type';
export type * from 'alova';

3
packages/alova/src/shared.ts
View File

@@ -1,3 +0,0 @@
export function isJSON(contentType: string) {
return contentType.includes('application/json');
}

42
packages/alova/src/type.ts
View File

@@ -1,18 +1,9 @@
import type {
AlovaGenerics,
AlovaOptions,
AlovaRequestAdapter,
Method,
ResponseCompleteHandler,
ResponseErrorHandler
} from 'alova';
import type { AlovaGenerics, AlovaOptions, AlovaRequestAdapter, Method, ResponseCompleteHandler } from 'alova';
export type CustomAlovaConfig<AG extends AlovaGenerics> = Omit<
AlovaOptions<AG>,
'statesHook' | 'beforeRequest' | 'responded' | 'requestAdapter'
> & {
/** expired token codes */
expiredTokenCodes: string[];
/** request adapter. all request of alova will be sent by it. */
requestAdapter?: AlovaRequestAdapter<AG['RequestConfig'], AG['Response'], AG['ResponseHeader']>;
};
@@ -25,26 +16,23 @@ export interface RequestOptions<AG extends AlovaGenerics> {
*
* @param method alova Method Instance
*/
onRequest?: (method: Method<AG>) => void | Promise<void>;
onRequest?: AlovaOptions<AG>['beforeRequest'];
/**
* The hook to check backend response is success or not
*
* @param response Axios response
* @param response alova response
*/
isBackendSuccess?: (response: Response) => Promise<boolean>;
isBackendSuccess: (response: AG['Response']) => Promise<boolean>;
/** The hook to refresh token */
refreshTokenHandler?: () => Promise<void>;
/**
* The hook after backend request fail
*
* For example: You can handle the expired token in this hook
*
* @param response Axios response
* @param instance Axios instance
*/
onBackendFail?: (response: Response) => Promise<Response | null> | Promise<void>;
/** The config to refresh token */
tokenRefresher?: {
/** detect the token is expired */
isExpired(response: AG['Response'], Method: Method<AG>): Promise<boolean> | boolean;
/** refhresh token handler */
handler(response: AG['Response'], Method: Method<AG>): Promise<void>;
};
/** The hook after backend request complete */
onComplete?: ResponseCompleteHandler<AG>;
/**
@@ -54,11 +42,11 @@ export interface RequestOptions<AG extends AlovaGenerics> {
*
* @param error
*/
onError?: ResponseErrorHandler<AG>;
onError?: (error: any, response: AG['Response'] | null, methodInstance: Method<AG>) => any | Promise<any>;
/**
* transform backend response when the responseType is json
*
* @param response Axios response
* @param response alova response
*/
transformBackendResponse?: (response: AG['Response']) => any | Promise<any>;
transformBackendResponse: (response: AG['Response']) => any;
}

29
packages/hooks/src/use-table.ts
View File

@@ -17,14 +17,7 @@ export type TableColumnCheck = {
export type TableDataWithIndex<T> = T & { index: number };
export type TransformedData<T> = {
data: TableDataWithIndex<T>[];
pageNum: number;
pageSize: number;
total: number;
};
export type Transformer<T, Response> = (response: Response) => TransformedData<T>;
export type Transformer<T, Response> = (response: Response) => TableDataWithIndex<T>[];
export type TableConfig<A extends ApiFn, T, C> = {
/** api function to get table data */
@@ -32,7 +25,7 @@ export type TableConfig<A extends ApiFn, T, C> = {
/** api params */
apiParams?: Parameters<A>[0];
/** transform api response to table data */
transformer: Transformer<T, Awaited<ReturnType<A>>>;
transformer: Transformer<T, Awaited<ReturnType<ReturnType<A>['send']>>>;
/** columns factory */
columns: () => C[];
/**
@@ -47,12 +40,6 @@ export type TableConfig<A extends ApiFn, T, C> = {
* @param columns
*/
getColumns: (columns: C[], checks: TableColumnCheck[]) => C[];
/**
* callback when response fetched
*
* @param transformed transformed data
*/
onFetched?: (transformed: TransformedData<T>) => MaybePromise<void>;
/**
* whether to get data immediately
*
@@ -74,17 +61,17 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
const columns = computed(() => getColumns(allColumns.value, columnChecks.value));
const states = usePagination(
(page, pageSize) => apiFn({ ...formatSearchParams(searchParams), page, size: pageSize }),
const states = usePagination<ReturnType<A> extends Method<infer AG> ? AG : never, ReturnType<typeof transformer>>(
(page, size) => apiFn({ ...formatSearchParams(searchParams), page, size }) as any,
{
immediate,
data: transformer,
total: res => res.data.total
total: res => res.total
}
).onSuccess(event => {
setEmpty(event.data.length === 0);
).onSuccess(({ data }) => {
setEmpty(data.length === 0);
});
delete states.uploading;
Reflect.deleteProperty(states, 'uploading');
function reloadColumns() {
allColumns.value = config.columns();