ts版详细写下axios
时间: 2024-09-26 17:03:37 浏览: 21
在TypeScript(TS)中,为了给Axios添加静态类型支持,我们可以对它进行进一步的类型装饰和增强。以下是一个简单的示例,展示如何在TS项目中安装和使用Axios,并实现一些基本的类型安全操作:
首先,确保已安装了axios库:
```bash
npm install axios @types/axios --save
```
然后,在`.d.ts` 文件(如`src/types/axios.d.ts`)中声明Axios的接口,以便在项目中使用:
```typescript
// axios.d.ts
declare module 'axios' {
export interface AxiosResponse<T> {
data: T;
status: number;
statusText: string;
}
export class AxiosError extends Error {
response?: AxiosResponse<any>;
}
export type AxiosInstance = {
request(config: AxiosRequestConfig): Promise<AxiosResponse<any>>;
get(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<any>>;
post(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<any>>;
// 其他HTTP方法...
};
export const default: AxiosInstance;
// 更加详细的接口,可根据需要添加
}
```
接下来,我们可以在组件或服务中导入并使用Axios,并提供类型安全的参数和返回值:
```typescript
// src/services/api.service.ts
import axios from 'axios';
interface ApiService {
login(username: string, password: string): Promise<{ success: boolean, message: string }>;
}
const apiService: ApiService = {
async login({ username, password }: { username: string; password: string }): Promise<{ success: boolean, message: string }> {
try {
const response = await axios.post('/api/auth/login', { username, password });
if (response.data.status === 200) {
return { success: true, message: 'Login successful' };
} else {
throw new Error('Login failed');
}
} catch (error) {
if (error instanceof AxiosError && error.response) {
return { success: false, message: error.response.statusText };
} else {
throw error;
}
}
},
};
export default apiService;
```
在这个例子中,类型注解确保了函数参数和返回值的正确类型,提高了代码的可读性和健壮性。