feat: refactor all pages with @sa/alova

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

View File

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

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';

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';

View File

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

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;
}