Vue UseAsync

useAsync.ts

import { onMounted, ref } from 'vue'

type AsyncFunc = () => Promise<any>

type ReturnType<F extends AsyncFunc> = F extends () => Promise<infer R> ? R : any

type UseAsyncOptions = {
  lazy?: boolean
}

export function useAsync<F extends AsyncFunc>(fn: F, opts?: UseAsyncOptions) {
  const error = ref<Error|null>(null);
  const loading = ref(false);
  const data = ref<ReturnType<F>|null>(null)

  const trigger = async () => {
    loading.value = true;
    try {
      data.value = await fn();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  }

  onMounted(() => {
    if (opts?.lazy) return;
    trigger();
  })

  return [data, loading, error, trigger];
}

useAsync.lazy = <F extends AsyncFunc>(fn: F) => {
  return useAsync(fn, {
    lazy: true
  })
}

// EXAMPLE USAGE

export default defineComponent({
  name: 'App',
  setup() {
    const [data, loading, error] = useAsync(async () => {
      const { result } = await apiCall();
      return result;
    })

    return {
      loading,
      error,
      data
    }
  }
})