axios-mock-adapter使用

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 请求将再次发往实际服务器