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

本文主要是介绍用useRequest实现数据请求的简单教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

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

什么是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 是一个函数，它接受一个配置对象作为参数，并返回一个对象，该对象包含请求的状态和一些帮助函数。下面通过一个简单的示例来展示如何使用 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的参数详解

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的常见应用场景

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 提供了多种错误处理方式，以下是一些常用的错误处理方法：

错误捕获

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 提供了多种高级功能，帮助开发者更好地处理复杂的数据请求场景。下面介绍一些进阶使用技巧，这些技巧可以让 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 可以更好地适应各种复杂的数据请求场景，使应用在处理异步数据时更加灵活和健壮。

这篇关于用useRequest实现数据请求的简单教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！