umi.js的useRequest使用总结

我来详细介绍 @umijs/max 的 useRequest 的使用方法、参数配置和返回值。

useRequest 基本用法

1. 基本语法

typescript 复制代码

const { data, loading, error, run } = useRequest(fetchAPI, {
  // 配置项
});

2. 完整示例

现在让我详细解释 useRequest 的各个部分：

useRequest 详细说明

1. 基本语法

typescript 复制代码

const result = useRequest(service, options);

2. 参数说明

service 参数（请求函数）

typescript 复制代码

// 方式1：直接传入函数
const { data } = useRequest(fetchUserData);

// 方式2：传入带参数的函数
const { data } = useRequest((params) => fetchUserData(params));

// 方式3：传入异步函数
const { data } = useRequest(async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
});

options 配置项

基础配置

typescript 复制代码

{
  manual: false,           // 是否手动触发，默认false（自动触发）
  defaultParams: [],       // 默认参数
  onBefore: (params) => {}, // 请求前回调
  onSuccess: (data, params) => {}, // 成功回调
  onError: (error) => {},  // 错误回调
  onFinally: (data, error, params) => {}, // 完成回调
}

生命周期配置

typescript 复制代码

{
  refreshDeps: [],         // 依赖变化时重新请求
  refreshDepsAction: 'debounce', // 依赖变化时的行为：debounce/throttle
  ready: true,             // 是否准备就绪（条件请求）
  debounceInterval: 0,     // 防抖间隔
  throttleInterval: 0,     // 节流间隔
}

缓存配置

typescript 复制代码

{
  cacheKey: 'key',         // 缓存键
  cacheTime: 5 * 60 * 1000, // 缓存时间（毫秒）
  staleTime: 0,            // 数据保持新鲜时间
  retryCount: 0,           // 重试次数
  retryInterval: 1000,     // 重试间隔
}

轮询配置

typescript 复制代码

{
  pollingInterval: 0,      // 轮询间隔
  pollingWhenHidden: true, // 页面隐藏时是否继续轮询
  pollingErrorRetryCount: -1, // 轮询错误重试次数
}

3. 返回值说明

typescript 复制代码

const {
  // 数据相关
  data,           // 请求返回的数据
  error,          // 请求错误信息
  loading,        // 是否正在加载
  
  // 请求控制
  run,            // 手动触发请求（返回Promise）
  refresh,        // 重新请求（返回Promise）
  mutate,         // 直接修改data
  
  // 状态相关
  cancel,         // 取消请求
  unmount,        // 卸载组件
  
  // 其他
  fetches,        // 所有请求的状态
} = useRequest(service, options);

4. 实际应用场景

场景1：表单提交

typescript 复制代码

const { run, loading } = useRequest(
  (values) => submitForm(values),
  {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
      form.resetFields();
    },
    onError: (error) => {
      message.error('提交失败：' + error.message);
    },
  }
);

// 在表单提交时调用
const handleSubmit = (values) => {
  run(values);
};

场景2：数据列表

typescript 复制代码

const { data, loading, refresh } = useRequest(
  (params) => fetchUserList(params),
  {
    refreshDeps: [searchKeyword], // 搜索关键词变化时重新请求
    debounceInterval: 300,        // 防抖300ms
  }
);

场景3：详情页面

typescript 复制代码

const { data: userInfo, loading } = useRequest(
  () => fetchUserDetail(userId),
  {
    ready: !!userId,              // 只有userId存在时才请求
    refreshDeps: [userId],        // userId变化时重新请求
  }
);

场景4：实时数据

typescript 复制代码

const { data } = useRequest(
  fetchRealTimeData,
  {
    pollingInterval: 5000,        // 5秒轮询一次
    pollingWhenHidden: false,     // 页面隐藏时停止轮询
  }
);

5. 高级用法

乐观更新

typescript 复制代码

const { data, run, mutate } = useRequest(
  updateUser,
  { manual: true }
);

const handleUpdate = async (newData) => {
  const originalData = data;
  
  // 乐观更新
  mutate(newData, false);
  
  try {
    await run(newData);
    message.success('更新成功');
  } catch (error) {
    // 回滚
    mutate(originalData, false);
    message.error('更新失败');
  }
};

依赖请求

typescript 复制代码

// 第一个请求
const { data: userInfo } = useRequest(
  () => fetchUserInfo(userId),
  { ready: !!userId }
);

// 依赖第一个请求的第二个请求
const { data: userPosts } = useRequest(
  () => fetchUserPosts(userInfo?.id),
  { 
    ready: !!userInfo?.id,
    refreshDeps: [userInfo?.id]
  }
);

6. 最佳实践

使用 manual: true 进行手动控制
合理使用 ready 进行条件请求
使用 refreshDeps 监听依赖变化
配置 onError 进行错误处理
使用 debounceInterval 防止频繁请求
合理使用缓存 提高性能

useRequest 是一个非常强大的数据请求 Hook，能够处理大部分异步数据获取场景！