vue3 usePost hook

import { Ref, ref, UnwrapRef } from "vue";

type UseStateReturnType <T> = [ state: Ref<UnwrapRef<T>>, setState: (newSate: UnwrapRef<T>) => void ]

export function useState <T> (rawData: T): UseStateReturnType<T> {

  const state = ref<T>(rawData)

  const setState = (newSate: UnwrapRef<T>) => {
    state.value = newSate
  }

  return [
    state,
    setState
  ]

}

export const enum ResultState {
  'SUCCESS' = 0,
  'SERVE_ERROR' = 500
}

export function hasError (result: ResultBaseData) {
  const { code, msg } = result
  if (code !== ResultState.SUCCESS) {
    message.error(msg)
    return true
  }
}




import { onMounted } from "vue";
import { useState } from "./useState";
import { hasError } from '@/share'

interface UsePostParams <T> {
  getMethod: () => Promise<ResultBaseData>,
  initData: T,
  processResult?: (data: any) => any 
}

export function usePost <T> (usePostParams: UsePostParams<T>) {
  
  const { getMethod, initData, processResult } = usePostParams

  const [ loading, setLoading ] = useState(false)

  const [ resultData, setResultData ] = useState(initData)

  const getResult = async () => {
    try {
      setLoading(true)
      const result = await getMethod()
      setLoading(false)
      const { data } = result
      if (hasError(result)) return 
      if (processResult) {
        setResultData(processResult(data))
      } else {
        setResultData(data)
      }
    } catch (error) {
      setLoading(false)
    }
  }

  onMounted(() => {
    getResult()
  })
  

  return {
    loading,
    getResult,
    resultData,
    setResultData
  }

}