/** * 延迟加载中间件 * 延迟显示加载状态,防止快速请求导致的闪烁 * @param delay 显示加载状态前的延迟时间(毫秒) * @returns Alova 中间件 */ export function createDelayLoadingMiddleware(delay = 300) { return async (context: any, next: any) => { context.controlLoading() const { loading } = context.proxyStates const timer = setTimeout(() => { loading.v = true }, delay) await next() loading.v = false clearTimeout(timer) } } /** * 全局加载中间件 * 为所有请求显示全局加载指示器,支持延迟显示 * * 使用示例: * ```typescript * // 1. 基本用法 * const { send: submit } = useRequest(method, { * middleware: createGlobalLoadingMiddleware() * }); * * // 2. 自定义延迟时间和加载文本 * const { send: submit } = useRequest(method, { * middleware: createGlobalLoadingMiddleware({ * delay: 500, // 延迟 500ms 显示加载指示器,防止闪烁 * loadingText: '正在提交...', // 自定义加载文本 * }) * }); * ``` * * @param options 加载选项 * @param options.delay 显示加载指示器前的延迟时间(毫秒),默认 300ms * @param options.loadingText 加载指示器显示的文本,默认为 'Loading...' * @returns Alova 中间件 */ export function createGlobalLoadingMiddleware(options: { delay?: number loadingText?: string } = {}) { const { delay = 0, loadingText = 'Loading...', } = options return async (ctx: any, next: any) => { // 自行控制loading ctx.controlLoading() // const globalLoading = useGlobalLoading() let timer: ReturnType | null = null // 如果delay为0或未设置,直接显示loading if (delay <= 0) { // globalLoading.loading(loadingText) uni.showLoading({ mask: true, title: loadingText, }) } else { // 延迟特定时间显示全局loading timer = setTimeout(() => { // globalLoading.loading(loadingText) uni.showLoading({ mask: true, title: loadingText, }) }, delay) } try { await next() } finally { // 清除定时器并关闭loading if (timer) { clearTimeout(timer) } // globalLoading.close() uni.hideLoading() } } } // 导出延迟加载中间件作为默认中间件 export const defaultMiddleware = createDelayLoadingMiddleware() export default defaultMiddleware