vue3 + typescript 封装axios
时间: 2023-08-31 17:09:45 浏览: 47
好的,下面是一个简单的示例:
首先,需要安装 `axios` 和 `@types/axios`:
```bash
npm install axios @types/axios --save
```
然后,创建一个 `http` 文件夹,在其中新建 `index.ts` 文件,用于封装 `axios`:
```typescript
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
// 定义 Response 数据类型
interface ResponseData<T = any> {
code: number;
message: string;
data: T;
}
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});
// 添加请求拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做些什么
return config;
},
(error: any) => {
// 对请求错误做些什么
console.error(error);
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response: AxiosResponse<ResponseData>) => {
// 对响应数据做些什么
const res = response.data;
if (res.code !== 200) {
console.error(res.message);
return Promise.reject(new Error(res.message || "Error"));
} else {
return res.data;
}
},
(error: any) => {
// 对响应错误做些什么
console.error(error);
return Promise.reject(error);
}
);
export default service;
```
接着,在需要使用的地方引入 `http` 模块,例如:
```typescript
import http from "@/http";
interface User {
name: string;
age: number;
}
export function getUser(): Promise<User> {
return http.get("/user").then((res: User) => {
return res;
});
}
```
这样,我们就可以使用 `getUser()` 方法获取用户数据了。简单说明一下:
- `getUser()` 方法返回的是一个 `Promise`,通过 `http.get` 方法发起 GET 请求获取数据;
- 在 `http` 模块中,我们定义了请求拦截器和响应拦截器,用于处理请求和响应;
- 在响应拦截器中,我们定义了 `ResponseData` 接口,用于约定返回的数据格式;
- 如果返回的状态码不是 `200`,则会抛出错误。