首页手记 useRequest课程：新手入门教程

useRequest课程：新手入门教程

标签：

Node.js React.JS Vue.js

概述

本文详细介绍了useRequest课程，包括useRequest的基本概念、安装配置、使用方法、回调函数以及高级用法。通过本文，读者可以全面了解和掌握useRequest课程，轻松应对各种网络请求场景。

1. useRequest简介

什么是useRequest

useRequest 是一个用于 React 项目的 Hook，它简化了与后端 API 的交互，提供了更简洁、更强大的请求方式。useRequest 基于 React 的 Hooks 机制，允许开发者在组件中方便地发起网络请求，并处理响应数据。

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const { loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>请求失败: {error.message}</p>}
      {data && <p>数据: {JSON.stringify(data)}</p>}
    </div>
  );
}

export default ExampleComponent;

useRequest的基本用途

useRequest 主要用于以下场景：

发送网络请求，包括 GET、POST、PUT、DELETE 等 HTTP 方法
监听请求的状态变化，例如请求成功、失败、加载中等
处理请求返回的数据
处理错误信息，例如请求超时、服务器错误等

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const { loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>请求失败: {error.message}</p>}
      {data && <p>数据: {JSON.stringify(data)}</p>}
    </div>
  );
}

export default ExampleComponent;

useRequest与React Hook的关系

useRequest 是 React Hooks 的一种具体实现。React Hooks 为函数组件提供了一种状态管理的方式，使得这些组件可以拥有自己的状态和生命周期。useRequest 则是专门为处理网络请求而设计的 Hook，它为组件提供了发起请求、处理响应和更新状态的功能。

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const { loading, error, data } = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>请求失败: {error.message}</p>}
      {data && <p>数据: {JSON.stringify(data)}</p>}
    </div>
  );
}

export default ExampleComponent;

2. 安装和配置useRequest

如何安装useRequest

使用 npm 或 yarn 安装 useRequest。以下是安装命令：

npm install use-request
# 或者
yarn add use-request

如何在项目中引入useRequest

安装完成后，需要在项目中引入 useRequest。在组件文件中，可以通过以下方式引入：

import { useRequest } from 'use-request';

useRequest的基本配置方法

useRequest 可以通过传递配置对象来设置请求的参数、处理函数等。以下是一个简单的配置示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {requestResult.data}</p>}
    </div>
  );
}

export default ExampleComponent;

3. 使用useRequest发送请求

useRequest的基本使用方法

useRequest 的基本使用方法是通过配置对象传递给 useRequest Hook。以下是一个基本的使用示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {requestResult.data}</p>}
    </div>
  );
}

export default ExampleComponent;

如何定义请求参数

useRequest 支持多种请求参数，例如 URL、请求体、请求头等。以下是一个带有请求体和请求头的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'POST',
    body: { name: 'John Doe', age: 30 },
    headers: { 'Content-Type': 'application/json' },
    onSuccess: (data) => {
      console.log('成功提交数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>提交中...</p>}
      {requestResult.error && <p>提交失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据提交成功!</p>}
    </div>
  );
}

export default ExampleComponent;

如何处理返回的数据

处理返回的数据通常在 onSuccess 回调函数中进行。以下是一个处理返回数据的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
      if (data && data.length > 0) {
        console.log('数据列表:', data.map(item => item.name));
      }
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

4. useRequest的回调函数

成功回调函数的使用方法

成功回调函数 onSuccess 在请求成功时会被调用。该回调函数接收两个参数：返回的数据和响应对象。以下是一个使用 onSuccess 的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data, response) => {
      console.log('成功获取数据:', data);
      console.log('响应状态:', response.status);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

错误回调函数的使用方法

错误回调函数 onError 在请求失败时会被调用。该回调函数接收一个错误对象作为参数。以下是一个使用 onError 的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onError: (error) => {
      console.log('请求失败:', error.message);
      if (error.response && error.response.status) {
        console.log('响应状态:', error.response.status);
      }
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

使用onSuccess和onError的注意事项

onSuccess 和 onError 都接收两个参数，分别是返回的数据和响应对象（或错误对象）。确保在回调函数中正确处理这些参数。
可以根据需要在 onSuccess 和 onError 中执行自定义逻辑，例如更新组件状态、显示提示信息等。
确保在 onSuccess 和 onError 中正确处理返回的数据和错误信息，避免出现未处理的错误。

5. useRequest的状态管理

useRequest的状态介绍

useRequest 提供了几个状态变量，用于表示请求的状态和结果：

loading: 表示请求是否正在加载中。
data: 请求成功后返回的数据。
error: 请求失败后的错误信息。
status: 请求的状态码。

以下是一个显示这些状态的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
      {requestResult.status && <p>状态码: {requestResult.status}</p>}
    </div>
  );
}

export default ExampleComponent;

如何监听请求的状态变化

可以通过监听 loading、error 和 data 状态的变化来处理不同的请求状态。以下是一个监听状态变化的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  React.useEffect(() => {
    if (requestResult.loading) {
      console.log('正在加载...');
    } else if (requestResult.error) {
      console.log('请求失败:', requestResult.error.message);
    } else if (requestResult.data) {
      console.log('数据加载完成:', requestResult.data);
    }
  }, [requestResult.loading, requestResult.error, requestResult.data]);

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

常见状态的处理方式

loading：在请求加载中时显示加载指示器或提示信息。
error：在请求失败时显示错误信息或提示用户重试。
data：在请求成功时显示返回的数据或进行进一步处理。

以下是一个综合处理请求状态变化的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  React.useEffect(() => {
    if (requestResult.loading) {
      console.log('正在加载...');
    } else if (requestResult.error) {
      console.log('请求失败:', requestResult.error.message);
    } else if (requestResult.data) {
      console.log('数据加载完成:', requestResult.data);
    }
  }, [requestResult.loading, requestResult.error, requestResult.data]);

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

6. useRequest的高级用法

自定义请求头

可以通过配置 headers 参数来设置自定义的请求头。以下是一个设置自定义请求头的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    headers: {
      'Authorization': 'Bearer your-token',
      'X-Custom-Header': 'custom-value',
    },
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

请求缓存的设置

useRequest 支持设置缓存，可以通过配置 cacheKey 参数来启用缓存。以下是一个启用缓存的示例：

import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult = useRequest({
    url: '/api/data',
    method: 'GET',
    cacheKey: 'my-cache-key',
    onSuccess: (data) => {
      console.log('成功获取数据:', data);
    },
    onError: (error) => {
      console.log('请求失败:', error);
    },
  });

  return (
    <div>
      {requestResult.loading && <p>加载中...</p>}
      {requestResult.error && <p>请求失败: {requestResult.error.message}</p>}
      {requestResult.data && <p>数据: {JSON.stringify(requestResult.data)}</p>}
    </div>
  );
}

export default ExampleComponent;

批量请求的管理

useRequest 支持同时发送多个请求。可以通过多次调用 useRequest Hook 来管理多个请求。以下是一个批量请求的示例：


import React from 'react';
import { useRequest } from 'use-request';

function ExampleComponent() {
  const requestResult1 = useRequest({
    url: '/api/data1',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据1:', data);
    },
    onError: (error) => {
      console.log('请求失败1:', error);
    },
  });

  const requestResult2 = useRequest({
    url: '/api/data2',
    method: 'GET',
    onSuccess: (data) => {
      console.log('成功获取数据2:', data);
    },
    onError: (error) => {
      console.log('请求失败2:', error);
    },
  });

  return (
    <div>
      {requestResult1.loading && <p>加载中1...</p>}
      {requestResult2.loading && <p>加载中2...</p>}
      {requestResult1.error && <p>请求失败1: {requestResult1.error.message}</p>}
      {requestResult2.error && <p>请求失败2: {requestResult2.error.message}</p>}
      {requestResult1.data && <p>数据1: {JSON.stringify(requestResult1.data)}</p>}
      {requestResult2.data && <p>数据2: {JSON.stringify(requestResult2.data)}</p>}
    </div>
  );
}

export default ExampleComponent;
``

通过上述示例，您可以详细了解如何使用 `useRequest` 发送请求、管理请求状态、处理回调函数以及掌握一些高级用法。希望这些示例能够帮助您更好地理解和使用 `useRequest`。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

米琪卡哇伊

手记
篇

粉丝

4

获赞与收藏

30

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空