题目：getAsyncData 的实现

定义「异步数据」的类型如下所示：

type AsyncData<T> = T | (() => T) | (() => Promise<T>)

实现一个 getAsyncData 方法，输入一个异步数据，返回这个异步数据的结果，而非函数。

考察点

判定数据类型，async/await，try-catch，TS 泛型

解答

async function getAsyncData<T>(data: AsyncData<T>): T {
  const getData = typeof data === 'function' ? data : () => data
  try {
    return await getData()
  } catch (error) {
    return undefined
  }
}

补充题目

如何处理 async/await 的异常？

使用 try-catch

如何实现一个 react hook，达成相同的功能？

function useAsyncData<T>(asyncData: AsyncData<T>) {
  const [loading, setLoading] = useState(true)
  const [result, setResult] = useState<T>(undefined)
  const getAsyncData = useCallback(async () => {
    const getData =
      typeof asyncData === 'function' ? asyncData : () => asyncData
    try {
      return await getData()
    } catch (error) {
      return undefined
    }
  }, [asyncData])
  useEffect(() => {
    getAsyncData(asyncData).then((result) => {
      setResult(result)
      setLoading(false)
    })
  }, [])
  return { loading, result }
}