Skip to content

[feat]: useAsync 新功能 #84

@CurryPaste

Description

@CurryPaste

使用场景

新特性使用场景
目前 useAsync 可以更新异步函数的 状态loading数据response

想法 再新增一个可选参数 minTime 最小执行时间

  • useWaitTime类似,给异步函数设置一个最小执行时间
  • 使用场景和和 useWaitTime 相同,控制loading的最小展示时间

不算是解决痛点,只是拓展了功能

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

demo 这个例子,只做展示用,所以只处理了loading
export const useWaitAsync = <T>(fun: ()=>Promise<T>, minTime: number) => {
/** 这个函数是为了保证首页不会loading太快 */
  const data = ref< T | undefined>();
  const loading = ref(true);
  const error: {code?: string, message?: string} = {};
  let loadingTemp = true;
  const promise = () => new Promise<void>((reslove, reject) => {
    fun().then((res: T) => {
      // 这里不再直接赋值,而是先暂存
      data.value = res;
      error.code = '0';
      error.message = '';
      //   loading.value = false;
      loadingTemp = false;
      reslove();
    }).catch((err: string) => {
      data.value = undefined;
      error.code = '999999';
      error.message = err;
      //   loading.value = false;
      loadingTemp = false;
      reject();
    });
  });
  useWaitTime(() => promise(), minTime, () => {
    // 满足最小时间后,再进行赋值,保证最小执行时间
    loading.value = loadingTemp;
  });
  return {
    data,
    loading,
    error,
  };
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions