### 如何在 Vite
+ React + TypeScript 项目中配置请求
为了实现 HTTP 请求功能，在 Vite
+ React + TypeScript 项目中通常会集成 Axios 或 Fetch API 来处理网络通信。下面介绍一种基于 Axios 的解决方案。
#### 安装 Axios 库
首先通过 npm 或 yarn 安装 axios：
```bash
npm install axios
```
或者
```bash
yarn add axios
```
#### 创建请求工具
函数
创建 `src/utils/request
.ts` 文件用于封装通用的请求逻辑:
```
typescript
import axios, { AxiosRequestConfig } from 'axios';
const instance = axios
.create({
baseURL: process
.env
.REACT_APP_API_URL || '', // 设置基础 URL 地址
timeout: 5000,
});
// 添加请求拦截器
instance
.interceptors
.request
.use(
(config: AxiosRequestConfig) => {
const token = localStorage
.getItem('token');
if (token && config
.headers) {
config
.headers
.Authorization = `Bearer ${token}`;
}
return config;
},
error => Promise
.reject(error),
);
export default instance;
```
此部分代码定义了一个 Axios
实例并设置了全局的基础路径以及超时时间，还加入了对每次发送请求前自动附带认证令牌的支持[^1]。
####
使用自定义 Hook 进行数据获取
可以在业务
组件内部利用上述
实例发起异步调用来加载远程资源。这里展示一个简单的例子来说明如何构建可重用的数据抓取 hook
函数——useFetchData() :
```
typescript
/// src/hooks/useFetchData
.ts
import { useState, useEffect } from '
react';
import request from '
../utils/request';
interface IFetchResult<T> {
loading: boolean;
data?: T | null;
error?: Error | null;
}
function useFetchData<T>(url: string): IFetchResult<T> {
const [state, se
tState] = useState<IFetchResult<T>>({
loading: true,
data: null,
error: null,
});
useEffect(() => {
let mounted = true;
async function fetchData() {
try {
const response = await request
.get(url);
if (mounted) {
se
tState({ loading: false, data: response
.data });
}
} catch (error) {
if (mounted) {
se
tState({ loading: false, error });
}
}
}
fetchData();
return () => {
mounted = false;
};
}, [url]);
return state;
}
export default useFetchData;
```
这段代码实现了当传入特定 url 参数后能够周期性触发 GET
方法向服务器端索要对应接口下的
JSON 数据，并且妥善管理了生命周期内的状态更新问题[^2]。
####
组件内应用
最后一步是在实际页面
组件里边引入这个钩子来进行操作，比如在 Home 页面做如下改动即可完成整个流程闭环：
```
tsx
/// src/pages/Home
.tsx
import
React from '
react';
import useFetchData from '
../
../hooks/useFetchData';
const HomePage:
React.FC = () => {
const result = useFetchData<{ message: string }>('/api/hello');
if (result
.loading) return <div>Loading
...</div>;
if (result
.error) return <div>Error!</div>;
return (
<>
<h1>{result
.data?
.message}</h1>
</>
);
};
export default HomePage;
```
这样就完成了从初始化到最终渲染的一系列工作流设计，使得开发者可以更加专注于视图层面上的表现形式而无需过多关心底层传输细节
.
本文介绍了如何在ReactTypeScript的函数组件中，通过useImperativeHandle和forwardRef将组件实例或方法暴露给父组件。使用useRef在父组件获取子组件实例，并指导如何在子组件中实现这一功能，以实现实例和方法的有效交互。
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
