phpjavac / composition

vue3 compositionApis
https://phpjavac.github.io/composition/
12 stars 11 forks source link

[feat]: useAsync 新功能 #84

Open CurryPaste opened 2 years ago

CurryPaste commented 2 years ago

使用场景

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

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

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

类型

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

参数、回调或其他补充

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,
  };
};