vue3 + typescript 封装axios
时间: 2023-08-31 17:05:06 浏览: 163
vue3_ts_axios_elementPlus:一个基于vue3 全家桶 + typescript+ element-plus+axios等 搭建的基础代码库, 有登录拦截鉴权,基本页面框架已经搭建好,可以直接进行各个模块开发
好的,这是一个关于Vue3和TypeScript封装axios的例子:
首先,我们需要先安装axios和@types/axios:
```
npm install axios @types/axios --save
```
接着,我们创建一个`request.ts`文件来封装axios:
```typescript
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
// 创建一个 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做些什么
return config;
},
(error: any) => {
// 对请求错误做些什么
console.log(error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做点什么
return response.data;
},
(error: any) => {
// 对响应错误做点什么
console.log('err' + error); // for debug
Promise.reject(error);
}
);
export default service;
```
然后,我们创建一个`api.ts`文件来定义接口:
```typescript
import request from '@/utils/request';
export function getUserInfo(params: any) {
return request({
url: '/user/info',
method: 'get',
params,
});
}
export function login(data: any) {
return request({
url: '/user/login',
method: 'post',
data,
});
}
```
最后,我们可以在组件中使用这些接口:
```typescript
import { defineComponent } from 'vue';
import { getUserInfo } from '@/api';
export default defineComponent({
setup() {
const fetchData = async () => {
const res = await getUserInfo({});
console.log(res);
};
fetchData();
return {};
},
});
```
这样,我们就完成了Vue3和TypeScript封装axios的过程。
阅读全文