在Vue 3和TypeScript中封装Axios以使用Mock.js，你可以创建一个Axios实例并在开发环境中使用Mock.js来模拟数据。以下是一个简单的示例：
- 安装Axios和Mock.js：
npm install axios mockjs- 创建
http.ts文件进行Axios封装：
import axios from 'axios';
import Mock from 'mockjs';
const mockData = Mock.mock({
'users|5-10': [{
'id|+1': 1,
'name': '@name',
'age|20-30': 25
}]
});
// 创建Axios实例
const http = axios.create({
baseURL: 'http://your-api-url.com',
timeout: 1000,
});
// 请求拦截器
http.interceptors.request.use(config => {
// 可以在这里添加请求头、处理token等
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
http.interceptors.response.use(response => {
return response.data;
}, error => {
return Promise.reject(error);
});
// 在开发环境中使用Mock.js模拟数据
if (process.env.NODE_ENV === 'development') {
http.get('/users', {
mock: true
}).reply(() => [200, mockData.users]);
}
export default http;- 使用封装后的Axios实例进行请求：
import http from './http.ts';
http.get('/users').then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});在生产环境中，你需要确保不使用Mock.js模拟数据，可以通过环境变量或配置文件来控制。
请注意，这只是一个简单的示例，你可能需要根据自己的项目需求进行相应的调整，比如添加更多的请求方法、处理token、错误处理等。