useRequest学习：初学者必备指南

本文提供了详细的useRequest学习指南，从基本概念到高级功能全面解析。文章介绍了useRequest的优势和应用场景，并通过示例代码展示了其基本使用方法。此外，还涵盖了useRequest的安装配置、缓存重试机制和错误处理等内容。

useRequest 是 React 中一个非常实用的 Hooks，它可以帮助前端开发者更高效地处理异步请求。本文将详细介绍 useRequest 的使用方法，从基本概念到高级功能，帮助初学者快速掌握这一工具。

useRequest的基本概念

useRequest 是一个 React Hooks，用于在函数组件中发起 HTTP 请求。它简化了请求的发起过程，提供了更多的可配置性和灵活性。useRequest 主要作用是封装了 axios 或其他 HTTP 客户端，使得异步请求的发起和处理变得简单直接。

useRequest 可以处理常见的 HTTP 请求方法，包括 GET、POST、PUT、DELETE 等。它也支持对请求的配置，例如自定义参数、头信息、超时时间等。

useRequest的优势和应用场景

1. 减少代码重复：useRequest 可以封装常见的请求逻辑，减少重复代码，提高代码复用性。
2. 统一错误处理：通过统一的错误处理机制，可以更好地捕获和处理请求过程中的异常情况。
3. 灵活的请求配置：支持自定义请求头、参数，并且可以设置请求超时时间等。
4. 状态管理：useRequest 可以方便地管理请求的状态，包括请求中、请求成功、请求失败等状态。
5. 缓存和重试：支持缓存和重试机制，优化请求处理流程。
6. 拦截器支持：提供拦截器功能，可以对请求和响应进行预处理和后处理。

useRequest 适用于需要进行大量 HTTP 请求的应用场景，例如：API 调用、数据获取、用户认证等。

下面是一段使用 useRequest 的基本示例代码：

import React, { useEffect } from 'react';
import useRequest from 'umi-request';

const MyComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
  });

  useEffect(() => {
    run();
  }, [run]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败: {error.message}</div>;
  }

  return <div>数据: {JSON.stringify(data)}</div>;
};

export default MyComponent;

安装方法

要使用 useRequest，首先需要通过 npm 或 yarn 安装相关的库：

npm install umi-request

或者

yarn add umi-request

配置步骤

useRequest 允许自定义配置，以便更好地适应项目需求。在 umi.config.ts 或 config/config.ts 中进行配置：

import { defineConfig } from 'umi';

export default defineConfig({
  request: {
    // 基础请求路径
    baseURL: '/api',
    // 请求超时时间（毫秒）
    timeout: 5000,
    // 请求头信息
    headers: {
      'Content-Type': 'application/json',
    },
  },
});

创建一个简单的useRequest实例

在函数组件中，你可以通过 useRequest 创建一个简单的实例来发起 GET 请求：

import React from 'react';
import useRequest from 'umi-request';

const MyComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
  });

  const handleClick = () => {
    run();
  };

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败: {error.message}</div>;
  }

  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      <div>数据: {JSON.stringify(data)}</div>
    </div>
  );
};

export default MyComponent;

执行请求和处理响应

useRequest 返回一个对象，其中包含以下属性：

• run: 用于执行请求的函数。
• loading: 布尔值，表示请求是否正在加载。
• error: 如果请求失败，返回错误信息。
• data: 请求成功的响应数据。

在组件中，你可以根据这些属性的状态来决定如何渲染界面。

缓存和重试机制

useRequest 提供缓存功能，避免重复请求相同的资源。同时支持重试机制，当请求失败时可以自动重新发起请求。

缓存配置：

import { defineConfig } from 'umi';

export default defineConfig({
  request: {
    cache: {
      // 缓存策略
      enabled: true,
      // 缓存时间（毫秒）
      ttl: 60000,
    },
  },
});

重试配置：

import { defineConfig } from 'umi';

export default defineConfig({
  request: {
    retry: {
      // 是否启用重试
      enabled: true,
      // 最大重试次数
      maxRetry: 3,
    },
  },
});

完整的缓存和重试机制代码示例：

import React, { useEffect } from 'react';
import useRequest from 'umi-request';

const MyComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
    cache: {
      enabled: true,
      ttl: 60000,
    },
    retry: {
      enabled: true,
      maxRetry: 3,
    },
  });

  useEffect(() => {
    run();
  }, [run]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败: {error.message}</div>;
  }

  return <div>数据: {JSON.stringify(data)}</div>;
};

export default MyComponent;

使用拦截器改进请求流程

拦截器可以对请求和响应进行预处理和后处理。这提供了更大的灵活性，例如添加自定义头信息、修改请求参数或响应数据等。

import { defineConfig } from 'umi';

export default defineConfig({
  request: {
    interceptors: {
      request: (config) => {
        // 在请求发送前进行修改
        if (config.method === 'POST') {
          config.data = JSON.stringify(config.data);
          config.headers['Content-Type'] = 'application/json';
        }
        return config;
      },
      response: (response) => {
        // 在响应收到后进行修改
        if (response.status === 200) {
          return response.data;
        } else {
          throw new Error('请求失败');
        }
      },
    },
  },
});

完整的拦截器代码示例：

import React, { useEffect } from 'react';
import useRequest from 'umi-request';

const MyComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
    interceptors: {
      request: (config) => {
        if (config.method === 'POST') {
          config.data = JSON.stringify(config.data);
          config.headers['Content-Type'] = 'application/json';
        }
        return config;
      },
      response: (response) => {
        if (response.status === 200) {
          return response.data;
        } else {
          throw new Error('请求失败');
        }
      },
    },
  });

  useEffect(() => {
    run();
  }, [run]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败: {error.message}</div>;
  }

  return <div>数据: {JSON.stringify(data)}</div>;
};

export default MyComponent;

捕获和处理不同类型的错误

useRequest 提供了错误捕获机制，使得你可以更灵活地处理请求中的错误情况。可以捕获不同类型的错误，并根据具体情况采取相应措施。

const { run, error, data } = useRequest({
  url: '/api/data',
  method: 'GET',
});

useEffect(() => {
  if (error) {
    console.error('请求失败', error);
    // 可以根据错误类型进行不同的处理
    if (error.response.status === 401) {
      // 处理未认证错误
    }
  }
}, [error]);

优雅的错误显示和用户引导

在用户界面层面上，可以通过显示友好的错误信息来引导用户解决问题。例如，当请求失败时，可以显示具体的错误信息，并提供相应的操作建议。

const MyComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
  });

  const handleClick = () => {
    run();
  };

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return (
      <div>
        <div>加载失败</div>
        <button onClick={handleClick}>重新加载</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      <div>数据: {JSON.stringify(data)}</div>
    </div>
  );
};

使用useRequest调用公开API

使用 useRequest 来调用一个公开的 API，例如 GitHub API。这里我们调用 GitHub API 获取用户的个人信息。

import React from 'react';
import useRequest from 'umi-request';

const UserComponent = () => {
  const { run, loading, error, data } = useRequest({
    url: 'https://api.github.com/users/octocat',
    method: 'GET',
  });

  useEffect(() => {
    run();
  }, [run]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败: {error.message}</div>;
  }

  return (
    <div>
      <div>用户名: {data.login}</div>
      <div>用户名: {data.name}</div>
      <div>头像: <img src={data.avatar_url} alt="头像" /></div>
      <div>邮箱: {data.email}</div>
      <div>个人主页: <a href={data.html_url} target="_blank" rel="noopener noreferrer">{data.html_url}</a></div>
    </div>
  );
};

export default UserComponent;
``