vuets如何封装 axios,使用mock.js

在Vue 3和TypeScript中封装Axios以使用Mock.js，你可以创建一个Axios实例并在开发环境中使用Mock.js来模拟数据。以下是一个简单的示例：

1. 安装Axios和Mock.js：

npm install axios mockjs

2. 创建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;

3. 使用封装后的Axios实例进行请求：

import http from './http.ts';
 
http.get('/users').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

在生产环境中，你需要确保不使用Mock.js模拟数据，可以通过环境变量或配置文件来控制。

请注意，这只是一个简单的示例，你可能需要根据自己的项目需求进行相应的调整，比如添加更多的请求方法、处理token、错误处理等。