Vue 3是一种流行的JavaScript框架，而
TypeScript是一种类型安全的JavaScript的超集。
封装axios是在
Vue 3项目中
使用TypeScript来
封装axios库，以便更好地管理和
使用网络请求。
在
Vue 3 +
TypeScript中
封装axios，可以按照以下步骤进行：
1. 安装
axios和@
types/
axios：
```
npm install
axios @
types/
axios
```
2. 创建一个api.
ts文件，用于
封装axios请求：
```
typescript
import
axios, {
AxiosRequestConfig,
AxiosResponse } from '
axios';
// 创建一个
axios实例
const
instance =
axios.create({
baseURL: 'http://api.example.com', // 设置请求的基础URL
timeout: 5000, // 设置请求超
时时间
});
// 请求拦截器
instance.interceptors.request.
use(
(config:
AxiosRequestConfig) => {
// 在发送请求之前做一些处理，例如添加token等
return config;
},
(error: any) => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.
use(
(response:
AxiosResponse) => {
// 对响应数据进行处理，例如统一处理错误码等
return response.data;
},
(error: any) => {
// 处理响应错误
return Promise.reject(error);
}
);
//
封装get请求
export function get(url: string, params?: any): Promise<any> {
return
instance.get(url, { params });
}
//
封装post请求
export function post(url: string, data?: any): Promise<any> {
return
instance.post(url, data);
}
```
3. 在
Vue组件中
使用封装的
axios请求：
```
typescript
import { defineComponent } from '
vue';
import { get, post } from './api';
export default defineComponent({
methods: {
fetchData() {
get('/api/data').then((response) => {
// 处理响应数据
}).catch((error) => {
// 处理请求错误
});
},
postData() {
post('/api/data', { name: 'example' }).then((response) => {
// 处理响应数据
}).catch((error) => {
// 处理请求错误
});
},
},
});
```
以上就是在
Vue 3 +
TypeScript中
封装axios的基本步骤。通过
封装，可以更好地管理和复用网络请求代码，并且可以在请求拦截器和响应拦截器中进行统一处理。同
时，
使用TypeScript可以提供类型检查和自动补全的功能，提高代码的可靠性和开发效率。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2932
