React useFetch钩子
以声明方式实现fetch()
。
- 创建一个自定义钩子,接受
url
和options
作为参数。 - 使用
useState()
钩子初始化response
、error
和abort
状态变量。 - 使用
useEffect()
钩子异步调用fetch()
并相应地更新状态变量。 - 创建并使用一个
AbortController
来允许取消请求。在组件卸载时使用它来取消请求。 - 返回一个包含
response
、error
和abort
状态变量的对象。
const useFetch = (url, options) => {
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const [abort, setAbort] = React.useState(() => {});
React.useEffect(() => {
const fetchData = async () => {
try {
const abortController = new AbortController();
const signal = abortController.signal;
setAbort(abortController.abort);
const res = await fetch(url, {...options, signal});
const json = await res.json();
setResponse(json);
} catch (error) {
setError(error);
}
};
fetchData();
return () => {
abort();
}
}, []);
return { response, error, abort };
};
const ImageFetch = props => {
const res = useFetch('https://dog.ceo/api/breeds/image/random', {});
if (!res.response) {
return <div>Loading...</div>;
}
const imageUrl = res.response.message;
return (
<div>
<img src={imageUrl} alt="avatar" width={400} height="auto" />
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<ImageFetch />
);