Escenario del proyecto
Cualquiera que haya escrito programas pequeños o h5 y otros terminales móviles sabe que habrá paginación al solicitar la interfaz de la lista de fondo.
Beneficios de la paginación
- 1. Mejorar la velocidad de respuesta de la interfaz (como todos sabemos, definitivamente existe una diferencia en el tiempo de respuesta entre verificar 10 datos y verificar 10,000 datos)
- 2. Mejore el rendimiento de renderizado del front-end y detecte todos los datos a la vez. El front-end se congelará si no crea una lista virtual.
- 3. Ahorra presión en el servidor
Preguntas planteadas
Xiaosheng Bibi: La presión sobre su servidor se reduce. La cantidad de código ha aumentado. Cada página debe definir el estado de la lista actual (si hay una página siguiente), en qué página se encuentra la lista actual y la lista debe ser acumulado ¡Cuántas solicitudes por página! Simplemente soy un mal programador. ¡Solo quiero salir temprano del trabajo! ! Especialmente cuando una página solicita varias listas, es muy molesto escribir estos códigos repetidos, ¿de acuerdo?
Entonces, ¿cómo reutilizar estos parámetros repetidos con una sola línea de código? ? Podemos resolverlo usando ganchos.
Práctica previa
definir tipo
Escriba el método de solicitud y establezca los datos y el estado de la lista.
Practica actual
Definir tipo + método de solicitud
Es así de simple, solo úsalo y listo.
El origen de los ganchos
Los ganchos son una característica nueva en React 16.8.0. Estaba escribiendo React en ese momento. Cualquiera que haya escrito React sabe que en ese momento, los componentes de clase eran la corriente principal y los ganchos eran
¿Qué demonios? ? ¿Es fácil de usar? Veamos qué problemas resuelven los ganchos.
-
1. Es difícil reutilizar la lógica de estado entre componentes.
-
2. Los componentes complejos se vuelven difíciles de entender
-
3. Clases incomprensibles (los componentes de clase mencionados anteriormente)
Lo usé por un tiempo y sentí que esto es realmente fácil de usar. Es mucho más conveniente de escribir que los componentes de clase. Puede simplemente presentarlo y usarlo.
Vue3: Reacciona, ustedes tienen una buena idea sobre los ganchos, los usaré para ustedes.
En este momento, también tenemos varios ganchos en nuestro vue3.
Ganchos personalizados
Los ganchos generalmente se denominan useXXXXX. Recomendamos una biblioteca de ganchos oficial de vue, vueUses, que contiene varios ganchos diversos. Desafortunadamente, esta biblioteca es un documento en inglés, pero no es un gran problema. No afecta en absoluto su facilidad de uso.
Dirección del sitio web oficial de vueUses.
Ejemplos de funciones de interfaz y ejemplos de respuesta
export interface IListResponse<T> {
code: number
rows: T,
msg: string,
[key: string]: any
}
export type TApiListRequest<T> = Promise<IListResponse<T>>
/**
* 客户列表
* @param params
* @returns
*/
export const reqCustomerlistPage = <T>(params?: T): TApiListRequest<ICustomerListItem[]> => {
return new Promise(async (resolve) => {
const url = `/core/customer/listPage`;
let result = await $http.post(url, params);
resolve(result);
});
};
Listar código de solicitud para ganchos personalizados
interface IUseRequestListConfig<T> {
/** 当前页自定义请求字段，默认是pageNum */
pageNumFields?: string
/** 每页数量自定义请求字段，默认是pageSize */
pageSizeFields?: string
/** 返回数据中列表的字段，默认是rows */
dataFields?: string
/**封装好的接口api */
apiFunction: (params?: any) => TApiListRequest<T[]>
}
// 加载状态
enum TLoadStatus {
LOAD_MORE = 'loadmore', //# 加载更多
LOADING = 'loading', //#加载中
NOMORE = 'nomore', //#没有更多
}
/**
* 列表请求hooks
* @param originConfig 配置
* @returns
*/
export const useRequestList = <T>(originConfig: IUseRequestListConfig<T>) => {
// 默认配置
const defaultConfig = {
pageNumFields: "pageNum", pageSizeFields: "pageSize", dataFields: "rows" }
// 合并后配置
const config: IUseRequestListConfig<T> = {
...defaultConfig, ...originConfig }
interface IState {
params: {
[x: string]: number;
};
}
const state = reactive<IState>({
params: {
[config.pageNumFields!]: 1,
[config.pageSizeFields!]: 10,
},
})
const dataSource = ref<T[]>([])
const status = ref<TLoadStatus>(TLoadStatus.LOAD_MORE)
/**
* 加载数据
* @param otherParams
* @returns
*/
const loadData = async <T extends Record<string, unknown>>(otherParams?: T) => {
if (status.value === TLoadStatus.NOMORE) return;
status.value = TLoadStatus.LOADING;
let result = await config.apiFunction({
...state.params, ...otherParams });
if (state.params.pageNum === 1) dataSource.value = [];
state.params.pageNum += 1;
dataSource.value = [...dataSource.value, ...result[config.dataFields!]];
status.value = dataSource.value.length < result.total ? TLoadStatus.LOAD_MORE : TLoadStatus.NOMORE;
}
/**
* 刷新列表
* beforeRfresh用于在刷新之前清空某些查询字段
*/
const handleRefresh = async <T extends Record<string, unknown>>(otherParams?: T, beforeRfresh?: () => void) => {
beforeRfresh?.()
status.value = TLoadStatus.LOAD_MORE;
state.params = {
...state.params,
[config.pageNumFields!]: 1,
};
await loadData(otherParams);
};
return {
loadData,
dataSource,
status,
handleRefresh
}
}
Instrucciones
const {
handleRefresh, loadData, status, dataSource } = useRequestList({
apiFunction: reqCustomerlistPage });
Así es, solicitar una lista se puede hacer con una línea de código (finalmente puedo pescar felizmente).
Al usarlo, simplemente coloque el método de gancho en el ciclo de vida y la función de gancho que debe solicitarse. En este gancho, el valor devuelto datos y El estado de la lista actual responde. Para cargar más componentes en la parte inferior de la lista, debe proporcionar el estado actual modificando la enumeración TLoadStatus. El estado de carga de algunas bibliotecas de componentes puede ser 0, 1, 2, y algunos pueden ser como yo.