react如何处理异步

异步处理的核心方法

在React中处理异步操作主要依赖以下几种方式：

useEffect钩子 适用于组件挂载、更新或卸载时的副作用操作。结合async/await语法可清晰管理异步流程：

useEffect(() => {
  const fetchData = async () => {
    const result = await axios.get('/api/data');
    setData(result.data);
  };
  fetchData();
}, []);

自定义Hook封装 将异步逻辑抽象为可复用的Hook：

function useAsyncData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

状态管理方案

Context + useReducer 适合复杂异步状态管理：

const asyncReducer = (state, action) => {
  switch(action.type) {
    case 'FETCH_START': 
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { data: action.payload, loading: false };
    // ...其他case
  }
};

function App() {
  const [state, dispatch] = useReducer(asyncReducer, {data: null});
  useEffect(() => {
    dispatch({type: 'FETCH_START'});
    fetchData().then(data => 
      dispatch({type: 'FETCH_SUCCESS', payload: data})
    );
  }, []);
}

Redux中间件 通过redux-thunk或redux-saga处理：

// thunk示例
const fetchUser = () => async dispatch => {
  dispatch({type: 'REQUEST_START'});
  try {
    const user = await getUser();
    dispatch({type: 'LOAD_USER', payload: user});
  } catch(error) {
    dispatch({type: 'REQUEST_FAILED', error});
  }
};

错误边界与加载状态

错误边界组件 捕获子组件异步错误：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }
  render() {
    return this.state.hasError 
      ? <FallbackUI /> 
      : this.props.children;
  }
}

加载状态处理 使用条件渲染展示不同状态：

function DataComponent() {
  const { data, isLoading, error } = useFetch('/api');

  if (isLoading) return <Spinner />;
  if (error) return <ErrorDisplay message={error.message} />;
  return <DataView data={data} />;
}

Promise链式操作

处理多个依赖的异步请求：

useEffect(() => {
  fetchUser(userId)
    .then(user => fetchProfile(user.id))
    .then(profile => {
      setUserProfile(profile);
    })
    .catch(error => {
      setError(error);
    });
}, [userId]);

竞态条件处理

使用AbortController取消过时请求：

useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    try {
      const res = await fetch(url, { 
        signal: controller.signal 
      });
      setData(await res.json());
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err);
      }
    }
  };
  fetchData();
  return () => controller.abort();
}, [url]);