封装一个vue3组合式函数useAsync

js
import { ref, shallowRef, computed } from 'vue'
 
const STATUS = {
  INIT: 'idle',
  PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected',
}
 
export default function useAsync(promiseOrFn) {
  const data = shallowRef(null)
  const error = shallowRef(null)
  const status = ref(STATUS.INIT)
  const loading = computed(() => status.value === STATUS.PENDING)
 
  const isFunction = typeof promiseOrFn === 'function'
 
  let lastArgs = []
 
  const run = async (...args) => {
    status.value = STATUS.PENDING
    error.value = null
    lastArgs = args
 
    try {
      const result = isFunction ? await promiseOrFn(...args) : await promiseOrFn
 
      data.value = result
      status.value = STATUS.FULFILLED
      return result
    } catch (err) {
      error.value = err
      status.value = STATUS.REJECTED
      throw err
    }
  }
 
  const refresh = () => run(...lastArgs)
 
  if (isFunction) {
    run()
  } else {
    run()
  }
 
  return {
    data,
    error,
    status,
    loading,
    run,
    refresh,
  }
}

js
import useAsync from './useAsync.js'
// const { data, loading, error, run, refresh } = use(testLocalApi, {})
// const { data, loading, error, run, refresh } = use(testLocalApi({ a: 1 }), {})
// const { data, loading, error, run, refresh } = use(() => testLocalApi({ b: 2 }), {})
const { data, loading, error, run, refresh } = useAsync(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json()),
  {}
)