React自定义Hook之useRequest
一、简介
通过自定义hook，实现对http请求封装。
支持loading状态判断请求进度，支持获取请求正确和错误结果。
二、技术方案
use request hook
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};}使用样例
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>
)