2024年6月14日发(作者：)

当你需要在应用中封装 API 请求时，可以使用自定义 hook。下面是一个示例，展示了

如何创建一个封装了请求的自定义 hook：

```jsx

import { useState, useEffect } from 'react';

const useAPIRequest = (url) => {

const [data, setData] = useState(null);

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

const fetchData = async () => {

try {

setIsLoading(true);

const response = await fetch(url);

const jsonData = await ();

setData(jsonData);

setIsLoading(false);

} catch (error) {

setError(error);

setIsLoading(false);

}

};

fetchData();

}, [url]);

return { data, isLoading, error };

};

export default useAPIRequest;

```

在上面的示例中，`useAPIRequest` 是一个自定义 hook，接收一个 URL 参数作为 API

请求的地址。它返回了 `data`、`isLoading` 和 `error` 三个状态，并在组件内部发起异步

请求并更新状态。

你可以在组件中使用这个自定义 hook，如下所示：

```jsx

import React from 'react';

import useAPIRequest from './useAPIRequest';

const MyComponent = () => {

const { data, isLoading, error } = useAPIRequest('');

if (isLoading) {

return <

;

}

if (error) {

return

Error: {e}
;

}

return (

{/* 使用获取到的数据进行渲染 */}

{data &&

{data}
}

);

};

export default MyComponent;

```

在上面的示例中，我们通过调用 `useAPIRequest` hook 来获取数据。根据请求状态，我

们渲染不同的内容，如加载中的提示、错误信息或获取到的数据。

这样，你就可以方便地在应用中封装和重用 API 请求逻辑了。记得根据实际需求进行

适当的修改和扩展。