umi-request & useRequest 源码分析及业务实践

import { useRequest } from 'umi';

function MyComponent() {
  // 使用 useRequest 获取数据
  const { data, error, loading } = useRequest(getUserInfo, {
    manual: true, // 禁用自动请求
  });

  // 手动触发请求
  const fetchData = () => {
    getUserInfo.run();
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <button onClick={fetchData}>获取用户信息</button>
      {data && <div>用户信息: {data.name}</div>}
    </div>
  );
}

// 定义请求的服务
const getUserInfo = () => {
  return fetch('https://api.example.com/user/info').then(response => response.json());
};