middleware.ts 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /**
  2. * 延迟加载中间件
  3. * 延迟显示加载状态,防止快速请求导致的闪烁
  4. * @param delay 显示加载状态前的延迟时间(毫秒)
  5. * @returns Alova 中间件
  6. */
  7. export function createDelayLoadingMiddleware(delay = 300) {
  8. return async (context: any, next: any) => {
  9. context.controlLoading()
  10. const { loading } = context.proxyStates
  11. const timer = setTimeout(() => {
  12. loading.v = true
  13. }, delay)
  14. await next()
  15. loading.v = false
  16. clearTimeout(timer)
  17. }
  18. }
  19. /**
  20. * 全局加载中间件
  21. * 为所有请求显示全局加载指示器,支持延迟显示
  22. *
  23. * 使用示例:
  24. * ```typescript
  25. * // 1. 基本用法
  26. * const { send: submit } = useRequest(method, {
  27. * middleware: createGlobalLoadingMiddleware()
  28. * });
  29. *
  30. * // 2. 自定义延迟时间和加载文本
  31. * const { send: submit } = useRequest(method, {
  32. * middleware: createGlobalLoadingMiddleware({
  33. * delay: 500, // 延迟 500ms 显示加载指示器,防止闪烁
  34. * loadingText: '正在提交...', // 自定义加载文本
  35. * })
  36. * });
  37. * ```
  38. *
  39. * @param options 加载选项
  40. * @param options.delay 显示加载指示器前的延迟时间(毫秒),默认 300ms
  41. * @param options.loadingText 加载指示器显示的文本,默认为 'Loading...'
  42. * @returns Alova 中间件
  43. */
  44. export function createGlobalLoadingMiddleware(options: {
  45. delay?: number
  46. loadingText?: string
  47. } = {}) {
  48. const {
  49. delay = 0,
  50. loadingText = 'Loading...',
  51. } = options
  52. return async (ctx: any, next: any) => {
  53. // 自行控制loading
  54. ctx.controlLoading()
  55. // const globalLoading = useGlobalLoading()
  56. let timer: ReturnType<typeof setTimeout> | null = null
  57. // 如果delay为0或未设置,直接显示loading
  58. if (delay <= 0) {
  59. // globalLoading.loading(loadingText)
  60. uni.showLoading({
  61. mask: true,
  62. title: loadingText,
  63. })
  64. }
  65. else {
  66. // 延迟特定时间显示全局loading
  67. timer = setTimeout(() => {
  68. // globalLoading.loading(loadingText)
  69. uni.showLoading({
  70. mask: true,
  71. title: loadingText,
  72. })
  73. }, delay)
  74. }
  75. try {
  76. await next()
  77. }
  78. finally {
  79. // 清除定时器并关闭loading
  80. if (timer) {
  81. clearTimeout(timer)
  82. }
  83. // globalLoading.close()
  84. uni.hideLoading()
  85. }
  86. }
  87. }
  88. // 导出延迟加载中间件作为默认中间件
  89. export const defaultMiddleware = createDelayLoadingMiddleware()
  90. export default defaultMiddleware