vue3和ts 两个项目 需要用一个请求返回类型, 怎么封装
时间: 2024-02-16 22:04:06 浏览: 21
可以封装一个公共的请求返回类型,在两个项目中共用。具体实现如下:
1. 创建一个统一的请求返回类型
```typescript
interface ApiResponse<T> {
code: number;
message: string;
data: T;
}
```
2. 在每个项目中定义自己的请求函数,并指定返回类型为上面定义的统一类型
```typescript
import { ApiResponse } from './common/types';
async function fetchUsers(): Promise<ApiResponse<User[]>> {
// 发送请求并返回 ApiResponse<User[]> 类型的数据
}
```
```typescript
import { ApiResponse } from './common/types';
async function fetchPosts(): Promise<ApiResponse<Post[]>> {
// 发送请求并返回 ApiResponse<Post[]> 类型的数据
}
```
3. 在项目中使用请求函数时,可以通过类型推断获取到返回数据的类型
```typescript
async function getUsers() {
const response = await fetchUsers();
// response 的类型为 ApiResponse<User[]>
const users = response.data;
}
```
```typescript
async function getPosts() {
const response = await fetchPosts();
// response 的类型为 ApiResponse<Post[]>
const posts = response.data;
}
```
这样,在两个项目中都可以使用同一个请求返回类型,避免了重复定义和使用不一致的问题。