用useRequest实现数据请求的简单教程

useRequest 是一个在 React 应用中常用的 Hooks，它主要用于处理组件中的数据请求逻辑，简化请求数据的过程。它支持多种配置选项，如自动取消请求、请求状态管理、多种请求方式等，极大简化了异步数据请求的实现。通过灵活的配置和回调函数，useRequest 能够优雅地处理各种复杂场景，提高应用的健壮性和用户体验。

useRequest 是一个在 React 应用中常用的 Hooks，它主要用于处理组件中的数据请求逻辑。它可以帮助开发者简化请求数据的过程，使得组件代码更加整洁和易于维护。useRequest 通常与 fetch、axios 等 HTTP 请求库结合使用，以实现异步数据获取。

useRequest 可以处理请求的发起、响应的接收、错误的捕获与处理等多个步骤，极大简化了整个过程的代码量。此外，它还支持请求状态的管理，如加载状态的显示等。

useRequest 的主要特点

• 自动取消请求：当组件卸载时，自动取消正在进行的请求，避免了不必要的数据加载。
• 请求状态管理：可以通过 useRequest 管理请求的状态，如是否正在加载、是否已完成、是否有错误等。
• 灵活的配置选项：提供多种配置选项，允许开发者自定义请求行为。
• 支持多种请求方式：支持 GET、POST、PUT 等多种 HTTP 请求方式。

useRequest 的这些特性使得它成为处理异步数据请求的理想选择。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false, // 自动发起请求
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

useRequest 是一个函数，它接受一个配置对象作为参数，并返回一个对象，该对象包含请求的状态和一些帮助函数。下面通过一个简单的示例来展示如何使用 useRequest：

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false, // 自动发起请求
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

在上述示例中，useRequest 接受一个异步函数作为参数，该异步函数用于发起数据请求。useRequest 返回一个对象，其中包含了 data（请求返回的数据）、loading（请求状态是否正在加载）、error（请求是否出错）等属性。

分析代码

• data：请求成功后的返回数据。
• loading：布尔值，表示请求是否正在执行。
• error：如果请求失败，将会返回错误信息。
• run：一个函数，用于触发请求。

manual: false 表示该请求在组件挂载时自动发起，manual: true 则需要手动调用 run 方法来发起请求。

useRequest 可以接受一个配置对象，该对象包含多个配置项，以便自定义请求的行为。以下是一些常用的配置项：

基本配置项

• url：请求的 URL。
• method：请求方式，如 GET、POST 等。
• params：请求参数，通常用于 GET 请求的查询参数。
• data：POST 请求的请求体数据。
• headers：请求头信息。
• manual：设置为 true 则在组件挂载时不会自动发起请求，需要手动调用 run 方法来发起请求。
• onSuccess：请求成功时执行的回调函数。
• onFailed：请求失败时执行的回调函数。
• onError：捕获请求错误时执行的回调函数。
• onStart：请求开始时执行的回调函数。
• onFinish：请求完成时执行的回调函数，无论请求成功或失败。
• shouldRetry：是否应该重试请求，通常用于处理网络错误等场景。
• revalidateOnFocus：当组件重新获得焦点时，是否重新发起请求。
• revalidateOnReconnect：当网络重新连接时，是否重新发起请求。
• revalidateOnMount：当组件挂载时，是否重新发起请求。
• refreshDeps：当这些依赖项发生变化时，重新发起请求。
• refreshInterval：定期发起请求的时间间隔（以秒为单位）。
• refreshWhenHidden：组件隐藏时是否发起请求。

示例代码

下面是一个包含多个配置项的示例：

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      method: 'GET',
      params: { id: 123 },
      headers: {
        'Content-Type': 'application/json',
      },
      manual: true,
      onSuccess: () => console.log('Request success!'),
      onFailed: () => console.error('Request failed!'),
      onError: (error) => console.error('Request error:', error),
      onStart: () => console.log('Request started!'),
      onFinish: () => console.log('Request finished!'),
      shouldRetry: (error) => error.response.status === 408,
      revalidateOnFocus: true,
      revalidateOnReconnect: false,
      refreshDeps: [1, 'abc'],
      refreshInterval: 5,
      refreshWhenHidden: true,
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

分析代码

• method：设置为 'GET' 表示发起的是 GET 请求。
• params：设置为 { id: 123 } 表示 URL 的查询参数。
• headers：设置请求头信息。
• manual：设置为 true，表示需要手动触发请求。
• onSuccess：请求成功时执行的回调函数。
• onFailed：请求失败时执行的回调函数。
• onError：捕获请求错误时执行的回调函数。
• onStart：请求开始时执行的回调函数。
• onFinish：请求完成时执行的回调函数。
• shouldRetry：当网络超时时自动重试请求。
• revalidateOnFocus：当组件重新获得焦点时，重新发起请求。
• revalidateOnReconnect：当网络重新连接时，不重新发起请求。
• refreshDeps：当依赖项 [1, 'abc'] 发生变化时，重新发起请求。
• refreshInterval：每隔 5 秒重新发起一次请求。
• refreshWhenHidden：当组件隐藏时，重新发起请求。

useRequest 在 React 应用中有着广泛的应用场景，其中一些典型的用例包括：

动态数据加载

• 示例：在组件挂载时自动发起数据请求，获取动态数据。

• 代码示例

  import React from 'react';
  import useRequest from 'umi-request';
  
  const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false, // 自动发起请求
    }
  );
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
  };
  
  export default MyComponent;

交互式数据更新

• 示例：用户触发动作时，发起请求更新数据。

• 代码示例

  import React from 'react';
  import useRequest from 'umi-request';
  
  const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: true, // 手动发起请求
    }
  );
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
  };
  
  export default MyComponent;

定期数据刷新

• 示例：定期刷新数据，例如每 5 秒重新发起请求获取最新数据。

• 代码示例

  import React from 'react';
  import useRequest from 'umi-request';
  
  const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false, // 自动发起请求
      refreshInterval: 5, // 每 5 秒重新发起请求
    }
  );
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
    </div>
  );
  };
  
  export default MyComponent;

网络错误处理

• 示例：当请求失败时，自动重试请求，或在特定条件下放弃重试。

• 代码示例

  import React from 'react';
  import useRequest from 'umi-request';
  
  const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false, // 自动发起请求
      shouldRetry: (error) => error.response.status === 408, // 当网络超时时自动重试
    }
  );
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
    </div>
  );
  };
  
  export default MyComponent;

依赖变化时重新请求

• 示例：当组件的某些依赖项发生变化时，重新发起请求。

• 代码示例

  import React from 'react';
  import useRequest from 'umi-request';
  
  const MyComponent = (props) => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch(`https://api.example.com/data?value=${props.value}`);
      return response.json();
    },
    {
      manual: false, // 自动发起请求
      refreshDeps: [props.value], // 当 props.value 发生变化时，重新发起请求
    }
  );
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
    </div>
  );
  };
  
  export default MyComponent;

这些示例展示了 useRequest 在不同场景下的使用方式，开发者可以根据具体的需求选择合适的配置项来实现功能。

在使用 useRequest 处理数据请求时，错误处理是非常重要的一部分。合理的错误处理可以提高应用的健壮性和用户体验。useRequest 提供了多种错误处理方式，以下是一些常用的错误处理方法：

错误捕获

useRequest 会捕获请求中的错误，并通过 error 属性返回错误信息。开发者可以根据这些错误信息采取适当的措施，如显示错误信息、重试请求等。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    },
    {
      manual: true,
      onError: (error) => console.error('Request error:', error),
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

分析代码

• onError：捕获请求错误时执行的回调函数。
• error：请求失败时返回的错误信息对象。

自动重试

当请求遇到网络超时或其他特定错误时，可以通过配置 shouldRetry 选项来实现自动重试。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false,
      shouldRetry: (error) => error.response.status === 408,
    }
  );

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

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

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

export default MyComponent;

分析代码

• shouldRetry：判断是否需要重试请求，例如当网络超时时自动重试。

显示错误信息

当请求失败时，可以通过 error 属性获取错误信息，并在界面上显示这些信息以提高用户体验。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: true,
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

分析代码

• error.message：显示具体的错误信息，帮助用户了解请求失败的原因。

重试逻辑

除了自动重试外，还可以通过自定义逻辑来决定如何处理错误。例如，在某些情况下，可以选择手动重试请求。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: true,
    }
  );

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

  if (error) {
    return (
      <div>
        <div>Error: {error.message}</div>
        <button onClick={run}>
          Retry
        </button>
      </div>
    );
  }

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

分析代码

• error：请求失败时返回的错误信息对象。
• run：重新发起请求的函数。

通过这些错误处理机制，可以确保应用在遇到错误时能够优雅地处理并恢复，提高系统的稳定性和用户体验。

useRequest 提供了多种高级功能，帮助开发者更好地处理复杂的数据请求场景。下面介绍一些进阶使用技巧，这些技巧可以让 useRequest 更加灵活和强大。

使用 refreshWhenHidden

refreshWhenHidden 是一个配置选项，当组件隐藏时（例如用户切换到其他页面），可以重新发起请求。这对于一些需要及时更新数据的应用场景非常有用。例如，当用户在后台切换应用时，重新获取数据可以确保数据是最新的。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false,
      refreshWhenHidden: true,
    }
  );

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

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

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

export default MyComponent;

分析代码

• refreshWhenHidden：当组件隐藏时重新发起请求。

使用 refreshDeps

refreshDeps 可以用来定义哪些依赖项发生变化时重新发起请求。这对于处理动态数据加载特别有用。当依赖项发生变化时，useRequest 会自动重新发起请求。

示例代码

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

const MyComponent = (props) => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch(`https://api.example.com/data?value=${props.value}`);
      return response.json();
    },
    {
      manual: false,
      refreshDeps: [props.value],
    }
  );

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

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

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

export default MyComponent;

分析代码

• refreshDeps：当依赖项发生变化时重新发起请求。

使用 refreshInterval

refreshInterval 是一个配置选项，可以设置定期发起请求的时间间隔。这对于需要定期更新数据的应用场景非常有用，例如实时数据流或定时任务。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false,
      refreshInterval: 5, // 每 5 秒重新发起请求
    }
  );

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

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

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

export default MyComponent;

分析代码

• refreshInterval：每 5 秒重新发起请求。

使用 revalidateOnReconnect

revalidateOnReconnect 是一个配置选项，当网络重新连接时重新发起请求。这对于处理网络断开连接的应用场景非常有用，确保在重新连接后能够获取最新的数据。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: false,
      revalidateOnReconnect: true,
    }
  );

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

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

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

export default MyComponent;

分析代码

• revalidateOnReconnect：当网络重新连接时重新发起请求。

使用 onSuccess, onFailed, onError, onStart, onFinish

这些回调函数可以在请求的不同阶段执行自定义逻辑。例如，在请求开始和完成时记录日志，或者在请求成功和失败时显示不同的信息。

示例代码

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

const MyComponent = () => {
  const { data, loading, error, run } = useRequest(
    async () => {
      const response = await fetch('https://api.example.com/data');
      return response.json();
    },
    {
      manual: true,
      onSuccess: () => console.log('Request success!'),
      onFailed: () => console.error('Request failed!'),
      onError: (error) => console.error('Request error:', error),
      onStart: () => console.log('Request started!'),
      onFinish: () => console.log('Request finished!'),
    }
  );

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

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

  return (
    <div>
      <div>Data: {JSON.stringify(data)}</div>
      <button onClick={run}>
        Refresh Data
      </button>
    </div>
  );
};

export default MyComponent;

分析代码

• onSuccess：请求成功时执行的回调函数。
• onFailed：请求失败时执行的回调函数。
• onError：捕获请求错误时执行的回调函数。
• onStart：请求开始时执行的回调函数。
• onFinish：请求完成时执行的回调函数。

通过这些进阶使用技巧，useRequest 可以更好地适应各种复杂的数据请求场景，使应用在处理异步数据时更加灵活和健壮。