vue3 + typescript 封装axios
时间: 2023-10-31 17:57:26 浏览: 29
好的,下面是一个简单的示例:
1. 安装 axios 和 @types/axios:
```bash
npm install axios @types/axios --save
```
2. 创建一个 axios 实例,并封装成一个 service:
```typescript
import axios, { AxiosInstance, AxiosResponse } from 'axios';
class ApiService {
private readonly instance: AxiosInstance;
constructor() {
this.instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
});
// 添加请求拦截器
this.instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
this.instance.interceptors.response.use(
(response) => {
// 对响应数据做点什么
return response;
},
(error) => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
}
public async get<T>(url: string, params?: any): Promise<T> {
const response: AxiosResponse<T> = await this.instance.get(url, {
params,
});
return response.data;
}
public async post<T>(url: string, data?: any): Promise<T> {
const response: AxiosResponse<T> = await this.instance.post(url, data);
return response.data;
}
public async put<T>(url: string, data?: any): Promise<T> {
const response: AxiosResponse<T> = await this.instance.put(url, data);
return response.data;
}
public async delete<T>(url: string, params?: any): Promise<T> {
const response: AxiosResponse<T> = await this.instance.delete(url, {
params,
});
return response.data;
}
}
export const apiService = new ApiService();
```
3. 在组件中使用 service:
```typescript
import { defineComponent } from 'vue';
import { apiService } from '@/services/api.service';
export default defineComponent({
async mounted() {
const data = await apiService.get('/users');
console.log(data);
},
});
```
以上是一个简单的 axios 封装示例,你可以根据自己的项目需求来进行更改。