React自定义Hook之useRequest

卡卡舅舅2023-11-24 3:03

一、简介

通过自定义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>
)