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>
)
相关推荐
啃火龙果的兔子29 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
JiaLin_Denny31 分钟前
如何在在NPM发布一个React组件
前端·react.js·npm·npm组件·npm发布·npm发布组件·npm如何发布组件
樱花开了几轉9 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A9 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6669 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus10 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus10 小时前
react-router-dom中的几种路由详解
前端·react.js
讨厌吃蛋黄酥15 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
Alchemist0115 小时前
React复习:基础组件+组件通信
react.js
tianchang16 小时前
React Hook 解析(一):useCallback 与 useMemo
前端·react.js