vue3 ts 封装 axios 请求 给出其中的内容
时间: 2023-03-14 10:10:58 浏览: 88
Vue3 TS 封装 Axios 请求的内容包括:1、使用 TS 语法来封装 axios 请求;2、重构 axios 请求,统一处理接口返回的数据;3、简单的封装,方便后期的维护和管理;4、定义接口,方便接口的调用与管理。
相关问题
vue3 ts 封装 axios 请求
在 Vue3 中,可以通过以下步骤封装 Axios 请求:
1. 安装 Axios
```bash
npm install axios
```
2. 创建一个 Axios 实例
在项目中创建一个 axios.ts 文件,使用以下代码创建一个 Axios 实例:
```typescript
import axios, { AxiosInstance } from 'axios';
const instance: AxiosInstance = axios.create({
baseURL: 'http://localhost:3000', // 设置请求的基础 URL
timeout: 10000, // 请求超时时间
});
export default instance;
```
3. 创建一个请求方法
在 axios.ts 文件中,可以创建一个请求方法,封装 Axios 请求:
```typescript
import instance from './axios';
interface Result<T> { // 定义接口,用于返回数据类型
code: number;
message: string;
data: T;
}
export const request = {
get<T>(url: string, params?: any): Promise<Result<T>> {
return instance.get(url, { params }).then(res => res.data);
},
post<T>(url: string, data?: any): Promise<Result<T>> {
return instance.post(url, data).then(res => res.data);
},
put<T>(url: string, data?: any): Promise<Result<T>> {
return instance.put(url, data).then(res => res.data);
},
delete<T>(url: string, params?: any): Promise<Result<T>> {
return instance.delete(url, { params }).then(res => res.data);
},
};
```
4. 使用封装好的请求方法
在组件中使用封装好的请求方法:
```typescript
import { defineComponent, reactive, onMounted } from 'vue';
import { request } from '../axios';
export default defineComponent({
setup() {
const state = reactive({
data: [],
});
onMounted(() => {
request.get('/api/data').then(res => {
if (res.code === 200) {
state.data = res.data;
}
});
});
return state;
},
});
```
以上就是在 Vue3 中使用 TypeScript 封装 Axios 请求的方法。
vue3 ts封装axios请求接口
好的,以下是一个简单的 Vue3 + TypeScript 封装 Axios 请求的示例代码:
首先,安装 `axios` 和 `@types/axios`:
```
npm install axios @types/axios --save
```
然后,在 `src/api` 目录下创建 `index.ts` 文件,定义一个 `API` 类来封装 Axios 请求:
```typescript
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
class API {
private instance: AxiosInstance;
constructor() {
this.instance = axios.create({
baseURL: 'https://your.api.url', // API base URL
timeout: 10000, // Request timeout
});
// Add request interceptor
this.instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// Do something before request is sent
// Add token to request headers, etc.
return config;
},
(error: any) => {
// Do something with request error
return Promise.reject(error);
},
);
// Add response interceptor
this.instance.interceptors.response.use(
(response: AxiosResponse) => {
// Do something with response data
// Handle error response, etc.
return response.data;
},
(error: any) => {
// Do something with response error
return Promise.reject(error);
},
);
}
public async get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
const response = await this.instance.get<T>(url, { params, ...config });
return response;
}
public async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
const response = await this.instance.post<T>(url, data, config);
return response;
}
// Add other HTTP methods if needed
}
export const api = new API();
```
在组件中使用 `api` 类,调用 `get` 或 `post` 方法来发送请求:
```typescript
import { defineComponent, ref } from 'vue';
import { api } from '@/api';
export default defineComponent({
setup() {
const data = ref<any>(null);
const fetchData = async () => {
try {
const response = await api.get('/user', { id: 1 });
data.value = response;
} catch (error) {
console.error(error);
}
};
return {
data,
fetchData,
};
},
});
```
以上示例代码中,我们封装了一个 `API` 类来管理 Axios 实例和请求拦截器、响应拦截器等。在组件中,我们通过 `api` 对象来调用 `get` 或 `post` 方法来发送请求,并使用 `async/await` 异步处理响应。