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

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>
相关推荐
trsoliu3 分钟前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽11 分钟前
react-checkbox的封装
前端
乐园游梦记13 分钟前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
岁月宁静15 分钟前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js
猪猪拆迁队19 分钟前
前端图形架构设计:AI生成设计稿落地实践
前端·后端·ai编程
岁月宁静21 分钟前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
非凡ghost22 分钟前
BiliLive-tools(B站录播一站式工具) 中文绿色版
前端·javascript·后端
yi碗汤园25 分钟前
【一文了解】八大排序-冒泡排序、选择排序
开发语言·前端·算法·unity·c#·1024程序员节
非凡ghost28 分钟前
bkViewer小巧精悍数码照片浏览器 中文绿色版
前端·javascript·后端