常用中间件实践

延迟更新 loading

当响应非常快的时候，加载状态会出现一次闪烁，这给会用户带来糟糕的体验，延迟更新 loading 可以让加载状态在一段时间后才显示，如果在这段时间内完成响应则不会出现加载状态。我们来实现一个带延迟更新 loading 的 middleware。

const delayLoadingMiddleware =
  (delayTimer = 1000) =>
  async (ctx, next) => {
    // 自行控制loading
    ctx.controlLoading();

    // 延迟特定时间更新
    const timer = setTimeout(() => {
      ctx.update({ loading: true });
    }, delayTimer);
    await next();
    ctx.update({ loading: false });
    clearTimeout(timer);
  };

useRequest(methodInstance, {
  middleware: delayLoadingMiddleware()
});