React自定义Hook之useRequest

一、简介

通过自定义hook,实现对http请求封装。

支持loading状态判断请求进度,支持获取请求正确和错误结果。

二、技术方案

use request hook

javascript 复制代码
export const useRequest = (options) => {
    
    // 请求参数
    const [url, ...init] = options;
    // 请求返回的数据
    const [data, setData] = useState(null);
    // 请求返回的错误信息
    const [error, setError] = useState(null);
    // 请求的loading 状态
    const [loading, setLoading] = useState(false);
     
    function loader(){
        setLoading(true);
        return fetch(url, init)
            .then((res) =>{
                setData(res.json());
                setLoading(false);
             })
            .catch((error) => {
                setError(error);
                setLoading(false); 
            });
    }

    return {loader, data, error, loading};

}

使用样例

javascript 复制代码
const {data, loader, error, isLoading} = useRequest({url:'/api/get/user',
                                            method:'GET',
                                            headers:{"Content-Type":"application/json"}}
);
return (
<Button onClick = {()=>{loader()}}>获取数据</Button>

<div>
    {isLoading ? <span>加载中</span> : <span>data</span>}
</div>
)
相关推荐
前端小趴菜054 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~5 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_12311 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0511 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界11 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
骑自行车的码农12 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
爱学习的茄子13 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
Spider_Man13 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
10年前端老司机15 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi15 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林