useRequest入门：新手必读教程-原创手记-慕课网

概述

本文详细介绍了useRequest入门，包括其基本用法、配置选项、安装方法以及通过示例展示如何进行GET和POST请求。文章还提供了常见问题及其解决方案，帮助开发者更好地理解和使用useRequest。

每节内容详细描述

什么是useRequest

useRequest 是一个基于 React Hook 的库，用于简化和优化数据请求的处理。它允许开发者更方便地从组件中发起网络请求，处理响应数据，并进行错误处理。它的设计灵感来源于 React Query 和 SWR，但更注重于简化使用过程。通过使用 useRequest，开发者可以减少重复代码，提高代码可维护性。

useRequest 的核心功能包括：

数据请求：支持发起 GET 和 POST 请求。
响应处理：自动处理成功和失败的响应。
状态管理：提供 loading 和 error 状态，方便在组件中显示加载和错误信息。
依赖更新：支持依赖项更新，使得请求在依赖项变化时自动重新发起。
取消请求：提供取消请求的功能，防止请求在组件卸载时仍继续执行。

useRequest的基本用法

useRequest 的基本用法通常包括以下步骤：

初始化 useRequest：在组件中使用 useRequest Hook，传入请求配置对象。
处理响应数据：通过 onSuccess 和 onError 回调函数处理响应数据。
调用请求：使用 run 方法发起请求。
更新依赖项：请求会根据依赖项的变化自动重新发起。

初始化 useRequest

在组件中初始化 useRequest 时，需要传入请求配置对象。请求配置对象通常包括以下几个属性：

url：请求的 URL。
method：请求方法，如 GET、POST。
headers：HTTP 请求头。
body：请求体。
onSuccess：请求成功后的回调函数。
onError：请求失败后的回调函数。
onSettled：请求完成后（无论成功还是失败）的回调函数。
onBefore：请求之前执行的回调函数。
onFinally：请求完成后执行的回调函数。
staleTime：数据失效时间。
revalidateTime：数据重新验证时间。

示例代码：

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

function ExampleComponent() {
    const { run, loading, error, data } = useRequest({
        url: '/api/data',
        method: 'GET',
        onSuccess: (data) => {
            console.log('Data received:', data);
        },
        onError: (error) => {
            console.error('Request failed:', error);
        }
    });

    const [query, setQuery] = useState('');

    const handleFetch = () => {
        run({ body: { query } });
    };

    return (
        <div>
            <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
            <button onClick={handleFetch}>Fetch Data</button>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

如何安装和引入useRequest

要使用 useRequest，你需要先将它安装到你的项目中。可以通过 npm 或 yarn 来安装：

使用 npm 安装

npm install use-request

使用 yarn 安装

yarn add use-request

安装完成后，你可以在项目中引入并使用 useRequest。首先，你需要在项目中引入 useRequest：

import useRequest from 'use-request';

除此之外，还需对项目进行一些配置，确保 useRequest 能够正常运行。确保你的应用中已经配置了支持 React Hooks 的环境，例如使用了 React 16.8 或以上版本。

useRequest的常用配置选项

useRequest 提供了丰富的配置选项来帮助你定制数据请求的行为。以下是一些常用的配置选项：

url：请求的 URL 地址。
method：HTTP 请求方法，例如 GET 或 POST。
headers：HTTP 请求头。
body：请求体，用于 POST 请求。
onSuccess：请求成功后的回调函数。
onError：请求失败后的回调函数。
onSettled：请求完成后（无论成功还是失败）的回调函数。
onBefore：请求之前执行的回调函数。
onFinally：请求完成后执行的回调函数。
staleTime：数据过期时间，之后会重新验证数据。
revalidateTime：数据重新验证时间，用于请求缓存的刷新。
cancelToken：取消请求的 Token。
useCache：是否使用缓存。
useErrorCache：是否使用错误缓存。

示例代码

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

function ExampleComponent() {
    const [query, setQuery] = useState('');

    const { run, loading, error, data } = useRequest({
        url: '/api/data',
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
        body: {
            query
        },
        onSuccess: (data) => {
            console.log('Data received:', data);
        },
        onError: (error) => {
            console.error('Request failed:', error);
        },
        onSettled: () => {
            console.log('Request completed');
        },
        onBefore: () => {
            console.log('Request before');
        },
        onFinally: () => {
            console.log('Request finally');
        },
        staleTime: 30000, // 数据过期时间，单位为毫秒
        revalidateTime: 60000, // 数据重新验证时间，单位为毫秒
        useCache: true, // 是否使用缓存
        useErrorCache: true // 是否使用错误缓存
    });

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

    return (
        <div>
            <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
            <button onClick={handleFetch}>Fetch Data</button>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

使用useRequest进行数据请求示例

在实际开发中，使用 useRequest 进行数据请求是一个常见的场景。下面我们将通过一个完整的示例来演示如何使用 useRequest 发起 GET 和 POST 请求，并处理响应数据。

示例一：GET 请求

假设我们有一个 API 端点 /api/data，用于获取用户的个人信息。我们将使用 useRequest 发起 GET 请求，并展示获取到的数据。

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

function UserComponent() {
    const [loading, data, error] = useRequest({
        url: '/api/data',
        method: 'GET',
        onSuccess: (data) => {
            console.log('Data received:', data);
        },
        onError: (error) => {
            console.error('Request failed:', error);
        }
    });

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

export default UserComponent;

示例二：POST 请求

现在假设我们有一个 API 端点 /api/submit，用于提交表单数据。我们将使用 useRequest 发起 POST 请求，并处理响应数据。

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

function FormComponent() {
    const [form, setForm] = useState({
        name: '',
        email: ''
    });

    const [loading, success, error] = useRequest({
        url: '/api/submit',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: form,
        onSuccess: (data) => {
            console.log('Form submitted successfully:', data);
        },
        onError: (error) => {
            console.error('Form submission failed:', error);
        }
    });

    const handleFormChange = (e) => {
        setForm({
            ...form,
            [e.target.name]: e.target.value
        });
    };

    const handleSubmit = () => {
        useRequest.run();
    };

    return (
        <div>
            <form>
                <input type="text" name="name" value={form.name} onChange={handleFormChange} />
                <input type="email" name="email" value={form.email} onChange={handleFormChange} />
                <button type="button" onClick={handleSubmit}>
                    Submit
                </button>
            </form>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {success && <p>Form submitted successfully!</p>}
        </div>
    );
}

export default FormComponent;

常见问题与解决方案

在使用 useRequest 进行数据请求时，可能会遇到一些常见的问题。下面列举了一些典型的问题及其解决方案。

问题一：加载状态一直显示

原因

请求没有正常返回或者在网络请求失败时没有更新加载状态。
使用了错误的 onSuccess 或 onError 回调。

解决方案

确保请求返回数据后更新加载状态。
使用正确的回调函数来处理响应。

示例代码：

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

function ExampleComponent() {
    const [loading, data, error] = useRequest({
        url: '/api/data',
        method: 'GET',
        onSuccess: (data) => {
            console.log('Data received:', data);
        },
        onError: (error) => {
            console.error('Request failed:', error);
        }
    });

    const handleFetch = () => {
        // 手动更新加载状态
        useRequest.run();
    };

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
            <button onClick={handleFetch}>Fetch Data</button>
        </div>
    );
}

export default ExampleComponent;

问题二：依赖项更新时请求未重新发起

原因

依赖项变化时没有触发请求的重新发起。
依赖项未正确设置。

解决方案

确保依赖项数组包含所有需要监听变化的变量。
使用正确的依赖项数组来触发请求的重新发起。

示例代码：

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

function ExampleComponent() {
    const [query, setQuery] = useState('');

    const { run, loading, error, data } = useRequest({
        url: '/api/data',
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
        body: {
            query
        },
        onSuccess: (data) => {
            console.log('Data received:', data);
        },
        onError: (error) => {
            console.error('Request failed:', error);
        },
        // 依赖项数组
        deps: [query]
    });

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

    return (
        <div>
            <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
            <button onClick={handleFetch}>Fetch Data</button>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

export default ExampleComponent;

问题三：请求取消失败

原因

未正确设置取消请求的 Token。
依赖项发生变化时未正确取消之前的请求。

解决方案

使用 cancelToken 选项正确配置取消请求。
在依赖项发生变化时手动取消之前的请求。

示例代码：

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

function ExampleComponent() {
    const [query, setQuery] = useState('');
    const [cancelToken, setCancelToken] = useState(null);

    const handleFetch = () => {
        if (cancelToken) {
            cancelToken.cancel('Request cancelled');
        }
        setCancelToken(new AbortController().signal);

        useRequest.run({
            url: '/api/data',
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
            body: {
                query
            },
            onSuccess: (data) => {
                console.log('Data received:', data);
            },
            onError: (error) => {
                console.error('Request failed:', error);
            },
            cancelToken: cancelToken
        });
    };

    return (
        <div>
            <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
            <button onClick={handleFetch}>Fetch Data</button>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

export default ExampleComponent;

通过上述示例和解决方案，你将能够更好地理解和使用 useRequest 进行数据请求。希望这些示例和解决方案能够帮助你解决实际开发中遇到的问题。