在TypeScript中封装自定义hooks实现不同种类的CRUD操作，可以创建一个通用的useCrud hook，然后根据不同的API接口来定制。以下是一个简单的示例：
import { useState, useEffect } from 'react';
import axios from 'axios';
// 定义CRUD操作的类型
type CrudAction = 'create' | 'read' | 'update' | 'delete';
// 定义API响应的通用格式
interface ApiResponse<T> {
data: T;
}
// 定义自定义hooks的通用函数
function useCrud<T, U>(
baseURL: string,
action: CrudAction,
data?: U
) {
const [response, setResponse] = useState<T | null>(null);
const [error, setError] = useState<Error | null>(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const runAction = async () => {
setIsLoading(true);
try {
const res = await axios<ApiResponse<T>>({
method: action,
url: baseURL,
data: action !== 'read' ? data : undefined,
});
setResponse(res.data);
} catch (err) {
setError(err);
} finally {
setIsLoading(false);
}
};
runAction();
}, [baseURL, action, data]);
return { response, error, isLoading };
}
// 使用自定义hooks
const { response, error, isLoading } = useCrud<Item, NewItem>(
'https://api.example.com/items',
'create',
{ name: 'New Item', description: 'This is a new item' }
);
在这个例子中，useCrud 函数接受一个基础URL、要执行的动作（CRUD之一）和数据（如果适用）。根据传入的动作，它将执行相应的HTTP请求。使用axios库进行网络请求，并通过使用React的useState和useEffect来管理状态。
这个函数可以被多次调用，每次可以针对不同的URL和操作来定制。这种封装可以减少重复代码，并使组件更加内聚，易于维护。