axios-mock-adapter 是一个用于模拟 axios HTTP 请求的库。它允许你在测试或开发过程中，为 axios 实例提供模拟的响应，以便在没有实际后端服务的情况下进行前端功能的开发和测试。
1. 安装 axios-mock-adapter
首先，你需要安装 axios-mock-adapter。你可以使用 npm 或 yarn 来安装它：
注意：安装到开发环境！不要直接默认安装到
npm install axios-mock-adapter --save-dev
# 或者
yarn add axios-mock-adapter --dev
2. 引入所需的库
在你的测试文件或需要模拟请求的文件中，引入 axios 和 axios-mock-adapter：
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
3. 创建一个模拟适配器实例
接下来，你需要创建一个 MockAdapter 实例，并将其与你的 axios 实例关联起来：
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 10000
})
// 创建一个 MockAdapter 实例，并将其与你的 axios 实例关联起来
const mock = new MockAdapter(service);
4. 定义模拟响应
使用 mock 实例的 onGet、onPost、onPut、onDelete 等方法来定义针对不同 HTTP 方法的模拟响应：
mock.onGet('/api/users').reply(200, {
users: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' }
]
});
mock.onPost('/api/users').reply(function (config) {
// 你可以访问请求的 config 对象，包括请求头和请求体
const { data } = config;
return [201, { id: data.id, name: data.name }]; // 返回状态码和响应数据
});
建议使用单独一个mock文件夹，导入的形式来引入
// mock.js
export const MockGets = {
'/captchaImage': {
"msg": "操作成功",
"code": 200,
"captchaEnabled": true,
"uuid": "352f4bb7088d435dad641c34aad337c4"
}
}
// service.js
Object.keys(MockGets).forEach(function(key) {
mock.onGet(key).reply(200, MockGets[key]);
console.log(key + ": " + MockGets[key]);
});
5. 在你的代码中使用 axios
axios.get('/api/users')
.then(response => {
console.log(response.data); // 输出模拟的用户列表
})
.catch(error => {
console.error(error);
});
6. 在测试或开发完成后清理模拟
当你完成测试或开发，并希望使用真实的后端服务时，你需要确保移除或禁用所有的模拟。这通常是通过销毁 MockAdapter 实例或移除模拟定义来完成的。
mock.restore(); // 恢复所有模拟，使得 axios 请求将再次发往实际服务器