vue3 + ts 封装axios
时间: 2023-08-29 16:13:40 浏览: 46
首先,我们需要安装 `axios` 和 `@types/axios` 两个依赖:
```bash
npm install axios @types/axios --save
```
然后创建一个 `http.ts` 文件来封装 axios:
```typescript
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
// 创建 axios 实例
const instance: AxiosInstance = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
// 请求拦截器
instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做些什么
return config;
},
(error: any) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做点什么
return response.data;
},
(error: any) => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default instance;
```
然后我们可以在需要使用 axios 的地方引入这个 `http.ts` 文件,并调用 axios 方法:
```typescript
import http from './http';
// GET 请求
http.get('/api/users')
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// POST 请求
http.post('/api/users', { name: '张三', age: 18 })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
```
这样就可以使用 ts 和 axios 来进行网络请求了。