useFetch React 自定义钩子

最新推荐文章于 2024-08-29 08:41:12 发布

diaperMaster

最新推荐文章于 2024-08-29 08:41:12 发布

阅读量420

点赞数

文章标签： reactjs react

本文链接：https://blog.csdn.net/diaperMaster/article/details/114369153

版权

本文介绍了如何在React中创建一个自定义钩子`useFetch`，用于处理第三方API的数据请求。从基础版开始，逐步优化，加入了异步请求功能，并最终通过Redux进行更高级的优化，提供了一个适用于项目的完整解决方案。

摘要由CSDN通过智能技术生成

React 自定义钩子第三方请求 (Fetch第三方数据)

基础版

import React, {
    useState, useEffect } from 'react';
const useFetch = url => {
   
	// 返回值, 加载状态, 错误值 
	const [response, setResponse] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);
	// 处理副作用, useEffect
	useEffect(() => {
   
		setLoading(true);
		setResponse(null);
		setError(null);

		fetch(url)
			.then(response => response.json())
			.then(response => {
   
				setLoading(false);
				setResponse(response);
			})
			.catch(error => {
   
				setLoading(false);
				setError