| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- /**
- * 延迟加载中间件
- * 延迟显示加载状态,防止快速请求导致的闪烁
- * @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<typeof setTimeout> | 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
|