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>
相关推荐
-代号952713 分钟前
【React】一、JSX的使用
前端·react.js·前端框架
uhakadotcom44 分钟前
AI搜索引擎的尽头是电商?从perplexity开始卖货说起...
前端·人工智能·后端
selfsuer1 小时前
Element-plus 【el-input输入框】和【el-select下拉选择框】样式修改
前端·javascript·vue.js
咔叽布吉2 小时前
【前端学习笔记】ES6 新特性
前端·笔记·学习
推开世界的门3 小时前
web 中 canvas 污染 以及解决方案
前端
星离~3 小时前
css—轮播图实现
前端·css
龙雨LongYu123 小时前
vue3+ts 我写了一个跟swagger.yml生成请求和响应实体(接口)
前端·vue.js·typescript
Stanford_11064 小时前
关于IDE的相关知识之一【使用技巧】
前端·ide·windows·微信小程序·微信公众平台·twitter·微信开放平台
_志哥_4 小时前
web开发环境下启动HTTPS服务访问
前端·javascript·https
爱健身的小刘同学4 小时前
安装 electron 依赖报错
前端·javascript·electron