axios封装ts版
时间: 2024-06-15 10:01:34 浏览: 144
Axios是一个流行的JavaScript库,用于在浏览器和Node.js中处理HTTP请求。在TypeScript(TS)中,我们可以对Axios进行封装,以提高代码的类型安全性和可读性。以下是一个简单的Axios封装示例:
首先,确保已经安装了axios和typescript:
```sh
npm install axios @types/axios
```
接下来,创建一个名为`AxiosService.ts`的文件,进行封装:
```typescript
import axios from 'axios';
import { AxiosInstance, AxiosResponse } from 'axios';
// 创建一个配置的axios实例
const instance: AxiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_URL || 'https://api.example.com', // API基础URL
timeout: 10000, // 请求超时时间(毫秒)
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`, // 如果需要,添加认证信息
},
});
// 封装发送GET请求
export const get = (url: string, params?: object): Promise<AxiosResponse<any>> => {
return instance.get(url, { params });
};
// 封装发送POST请求
export const post = (url: string, data: object): Promise<AxiosResponse<any>> => {
return instance.post(url, data);
};
// 封装其他请求方法,如PUT、DELETE等
// ...
```
在这个例子中,我们创建了一个全局的axios实例,并添加了一些基本配置。然后,我们为常见的HTTP方法(如GET和POST)定义了封装好的函数,这些函数返回Promise,方便在调用时处理响应。
使用这个封装后的服务,你的代码会自动得到类型提示:
```typescript
import { get } from './AxiosService';
async function fetchData(): Promise<void> {
try {
const response = await get('/users');
console.log(response.data); // TypeScript会知道response的数据类型
} catch (error) {
console.error(error.response.data);
}
}
```
阅读全文
相关推荐

















