好的,给你一段实用且吸引程序员的React异步数据获取最佳实践示范代码,包含了现代React技术栈的核心点:
-
使用
useEffect
进行副作用管理 -
利用
async/await
简洁写法 -
请求状态管理(loading, error, data)
-
取消未完成的请求(防止内存泄漏和竞态条件)
-
适配多个请求或参数变化
-
支持手动刷新数据
-
TypeScript 类型定义(可选)
import React, { useState, useEffect, useCallback, useRef } from 'react';
type FetchState<T> = {
data: T | null;
loading: boolean;
error: Error | null;
};
function useAsyncData<T>(
fetcher: () => Promise<T>,
deps: any[] = []
): [FetchState<T>, () => void] {
const [state, setState] = useState<FetchState<T>>({
data: null,
loading: false,
error: null,
})