react基础之自定义获取异步的hooks

前端一课2023-11-02 21:44

react 中也可以自定义获取异步数据的hooks,其基本用法，与同步数据有点类似，代码如下

js 复制代码

import { useEffect, useState } from "react"


// 异步获取信息
function getInfo(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Date.now().toString())
        }, 1500)
    })
}

// 自定义hooks
const useGetInfo = () => {
    const [loading, setLoading] = useState(true)
    const [info, setInfo] = useState('')
    // 获取数据
    useEffect(() => {
        getInfo().then(info => {
            // 设置状态
            setLoading(false)
            setInfo(info)
        })
    }, [])

    return {
        loading, info
    }
}
// 返回hooks
export default useGetInfo

使用方法：

js 复制代码

import useGetInfo from './hooks/useGetInfo';

  const { loading, info } =  useGetInfo()
  
  <div>
    异步获取数据：{ loading ? '加载中。。。': info}
</div>